1.v-text 指令
v-text 指令用于更新标签包含的文本，它的作用跟双大括号的效果一样。
<div id="app">
<p v-text="msg"></p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'hello,vue'
}
})
</script>
效果图.png
2.v-html 指令
它帮助我们绑定一些 html 代码的数据在视图上，比如：“<b>hello,vue</b>”，这个字符包含了 <b> 标签，要想 <b> 不被当作普通的字符渲染出来，就得用 v-html 指令。
<div id="app">
<p v-html="msg"></p>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
msg:'<b>hello,vue</b>'
}
});
</script>
效果图.png
3.v-show 指令
v-show，主要就是控制元素的 display css 属性的。
当 v-show 为 false 时，display 为 none；
当 v-show 为 true 时，display 为 元素的默认属性。
4.v-if 指令
v-if 与 v-show 不同的是，v-show 控制的是 元素的 display 属性值，而 v-if 直接控制元素是否渲染，也就是显示或者移除元素节点。
5.v-else 指令
v-else 与 v-if 一般来说是成对出现的，有 v-else 必须有 v-if，而有 v-if 可以没有 v-else。
<div id="app">
<p v-if="show">v-if</p>
<p v-else>v-else</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false
}
})
</script>
效果如下图所示：
效果图.png
网友评论