v-if 与 v-show
-
v-if 判断是否移除或者插入元素(默认显示)
- 根据表达式的值的布尔值来决定是否渲染元素,如果条件为 false 不渲染(达到隐藏元素的目的),为 true 则渲染。在切换时元素及它的数据绑定被销毁并重建。
-
v-show 判断是否显示或隐藏元素(默认隐藏 false)
- 根据表达式的布尔值,切换元素的 display CSS 属性,如果为false,则在元素上添加
display:none
(行内样式)来隐藏元素,否则移除display:none
实现显示元素。
HTML:
<div id="app"> <input type="button" name="" :value="msg" @click="flag=!flag"> <h1 v-if="flag">这是 v-if 控制的元素</h1> <h1 v-show="flag">这是 v-show 控制的元素</h1> </div>
JS:
new Vue({ el: '#app', data: { flag: true, msg: '显示/隐藏' }, methods: { } })
- 根据表达式的布尔值,切换元素的 display CSS 属性,如果为false,则在元素上添加