v-if是“真正”的条件渲染,因为在切换过程中条件内的事件监听器和子组件的会被适当的销毁和重建
v-show 不管初始条件市什么,元素总是被渲染,并且知识简单的基于css进行切换
v-if有更高的切换开销,而v-show有更高的初始渲染开销。
总结:v-if :用于条件很少改变的时候
v-show:用于频繁切换的时候
注意: v-show不支持,v-if支持
不推荐v-if,v-for一起使用,v-for具有比v-if更高的优先
v-if v-for 示例
//不推荐的使用
【v-if|v-if vs v-show vs v-for】将会如下运算
//如果只想渲染出一部分元素,每次重渲染的时候也要遍历整个列表,不论users是否发生变化
this.users.map(function (user) {
if (user.isActive) {
return user.name
}
})
//推荐使用计算属性
computed: {
activeUsers: function () {
return this.users.filter(function (user) {
return user.isActive
})
}
}
//
这样使用的好处: