目標:顯示或隱藏一段文本
原理:v-if v-show
分析:
共同點:都可以通過該指令去控制文本的顯示或者隱藏
不同點:v-if 直接從DOM上移除或者添加嘹吨,
v-show 會在DOM上設(shè)置display:none屬性
適用場景:如果經(jīng)常顯示或者隱藏文本v-show提升性能泽艘,如果不常操作顯示或者隱藏v-if節(jié)省內(nèi)存
例子:
<div v-if="show">
{{mes}}
</div>
<div v-show="show">
{{mes}}
</div>
var vm =new Vue({
el:"#app",
data:{
mes:"你好",
show:true
}
})
v-if 與v-else
<div v-if="show">
{{mes}}
</div>
<div v-else>
A不可見我將顯示
</div>
var vm =new Vue({
el:"#app",
data:{
show:true,
mes:"A我可以被看見",
}
})