Vue系列教程（十三）v-if和v-show的使用和特点
程序员文章站
2022-03-16 12:41:51
...
一般来说，
v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换，那么选择v-show较好。如果在运行时条件不大可能改变，那么选择v-if较好。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if和v-show的使用</title>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="toggle">
<h3 v-if="flag">这是由v-if控制的元素</h3>
<h3 v-show="flag">这是由v-show控制的元素</h3>
</div>
<script src="lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
页面效果：
当点击了按钮时：
使用v-if控制的元素被移除了，使用v-show控制的元素被添加了display:none样式。
注意：
-
v-if的特点：每次都会重新删除或创建元素 -
v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式 -
v-if有较高的切换性能消耗 -
v-show有较高的初试渲染消耗 - 如果元素涉及了频繁的切换，最好不要使用
v-if - 如果元素可能永远都不会被显示出来，则推荐使用
v-show
推荐阅读：
Vue系列教程（一）基础介绍
Vue系列教程（二）v-cloak、v-text、v-html的基本使用
Vue系列教程（三）v-bind指令
Vue系列教程（四）v-on指令定义事件
Vue系列教程（五）跑马灯效果案例
Vue系列教程（六）事件修饰符
Vue系列教程（七）v-model和双向数据绑定
Vue系列教程（八）v-model实现计算器案例
Vue系列教程（九）属性绑定为元素设置class类样式
Vue系列教程（十）属性绑定为元素绑定style行内样式
Vue系列教程（十一）v-for指令的四种使用方式
Vue系列教程（十二）v-for中key的使用注意事项
上一篇： ResNet