if vue 跳出_Vue.js 的条件渲染v-if和v-show - Break易站

Vue.js的条件渲染有：

v-if (v-if, v-else, v-else-if)

v-show

那么，这两者究竟有什么区别呢？我们可以先来看一下两个各自的用法。

Vue.js 的条件渲染v-if

v-if其实是“真正”的条件渲染，它主要有三个命令：v-if, v-else, v-else-if。下面我们就每个命令都举一个例子，来帮助我们更好地了解这三个命令。

v-if：

Vue 测试实例 - Break易站(breakyizhan.com)

现在你看到我了

Break易站

一个程序员的B站！

打字辛苦啦，递上一杯咖啡！

new Vue({

el: '#app',

data: {

seen: true,

ok: true }

})

提示：可以修改代码后运行

v-else：

Vue 测试实例 - Break易站(breakyizhan.com)

breakyizhan

google

new Vue({

el: '#app'

})

提示：可以修改代码后运行

v-else-if：

Vue 测试实例 - Break易站(breakyizhan.com)

1

2

3

Not 1/2/3

new Vue({

el: '#app',

data: {

type: '3'

}

})

提示：可以修改代码后运行

注： v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

Vue.js 的条件渲染v-show

和v-if不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意，v-show不支持  元素，也不支持 v-else。

Vue 测试实例 - Break易站(breakyizhan.com)

Hello!

new Vue({

el: '#app',

data: {

ok: true

}

})

提示：可以修改代码后运行

Vue.js 的条件渲染v-if和v-show对比

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。