vue学习笔记--条件渲染 v-if和v-show

目标:显示或隐藏一段文本
原理:v-if v-show
分析:
共同点:都可以通过该指令去控制文本的显示或者隐藏
不同点:v-if 直接从DOM上移除或者添加,
v-show 会在DOM上设置display:none属性
适用场景:如果经常显示或者隐藏文本v-show提升性能,如果不常操作显示或者隐藏v-if节省内存

例子:

{{mes}}
{{mes}}
var vm =new Vue({ el:"#app", data:{ mes:"你好", show:true } })

v-if 与v-else

 
{{mes}}
A不可见我将显示
var vm =new Vue({ el:"#app", data:{ show:true, mes:"A我可以被看见", } })

你可能感兴趣的:(vue学习笔记--条件渲染 v-if和v-show)