Vue 会根据不同的【指令】，针对标签实现不同的【功能】
指令：带有 v-前缀 的特殊标签属性，不同属性对应不同的功能
1.v-html:
作用：设置元素的 innerHTML
语法：v-html = "表达式 "
<div id="app">
<div v-html="msg"></div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `<a href="https://cn.vuejs.org/">Hello Vue.js</a>`
}
})
</script>
2.v-show
-
作用： 控制元素显示隐藏
-
语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
-
原理： 切换 display:none 控制显示隐藏
-
场景： 频繁切换显示隐藏的场景
3.v-if
-
作用： 控制元素显示隐藏（条件渲染）
-
语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
-
原理： 基于条件判断，是否创建或移除元素节点
-
场景： 要么显示，要么隐藏，不频繁切换的场景
4.v-if与v-show的区别
v-show 底层原理：切换 css 的 display: none 来控制显示隐藏
v-if 底层原理：根据判断条件控制元素的创建和移除（条件渲染）
5.v-else v-else-if
-
作用： 辅助 v-if 进行判断渲染
-
语法： v-else v-else-if = "表达式"
-
注意： 需要紧挨着 v-if 一起使用
<div id="app">
<p v-if="gender === 1">性别：♂ 男</p>
<p v-else>性别：♀ 女</p>
<hr>
<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
6.v-on
-
作用：注册事件 = 添加监听 + 提供处理逻辑
-
语法：
① v-on:事件名 = "内联语句"
② v-on:事件名 = "methods中的函数名"
-
简写： @事件名
-
注意： methods函数内的 this 指向 Vue 实例
<body>
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show = "isshow">Hello小唐</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isshow: true
},
methods: {
fn () {
// 让提供的所有methods中的函数，this都指向当前实例
// console.log('执行了fn',app.isshow)
// app.isshow = !app.isshow
this.isshow = !this.isshow
}
}
})
</script>
</body>
