1.v-show:
①v-show指令的作用是：根據(jù)真假值切換元素的顯示狀態(tài),是響應式的
②語法表達v-show = " 表達式 "
③他是控制指定屬性的display屬性來決定顯示還是隱藏
④指令后面的內(nèi)容最終都會解析為布爾值
⑤值為真(true)的時候元素顯示恩袱，值為假(false)的時候元素隱藏
⑥數(shù)據(jù)改變之后呢對應的元素的顯示狀態(tài)也是會同步更新的
<body>
<div id="app">
<input type="button" value="切換顯示" @click="changeIsShow" />
<p v-show="isShow">v-show的內(nèi)容</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
2.v-if:
①v-if指令的作用：根據(jù)表達式的真假切換元素的顯示狀態(tài)
②v-if = "表達式"
③通過操縱dom元素來進行切換顯示
④表達式的值為true的時候元素存在于dom樹中泣棋，為false的時候從dom樹中移除
<body>
<div id="app">
<input type="button" value="點我切換顯示" @click="changeIsShow" />
<p v-if="isShow">v-if的內(nèi)容</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
changeIsShow(){
this.isShow = !this.isShow
}
}
})
</script>
</body>
3.v-if和v-show的區(qū)別：
v-show:元素始終都會渲染到HTML，只是把不滿足條件的元素設(shè)置display:"none"的樣式畔塔，滿足條件的設(shè)置成顯示狀態(tài)潭辈。
v-if:只有滿足條件的才有資格渲染到HTML中，不滿足條件的不會渲染
4.分別什么時候用?
v-if:需要操作dom元素澈吨，有更高的性能消耗把敢，如果指定元素在渲染之后就很少改變，那么推薦使用v-if谅辣。
v-show:只是修改元素的css屬性修赞，對性能的消耗不是那么大，如果指定元素渲染之后需要頻繁的切換桑阶，那么推薦使用v-show
