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