1、v-show:根据表达式的真假值来显示和隐藏元素
<div id="app">
<p>hi</p>
<p v-show="temp">小明</p> <!-- v-show根据显示或者隐藏 -->
<p v-show="ok">贝贝</p>
</div>
<script>
var vm = new Vue({ //创建vue实例
el:'#app', //el是vue实例的属性,用于和demo 进行绑定
data:{ //data是vue 示例的属性,用于配置vue示例的数据
temp:true,
ok:true
}
})
window.setInterval(function(){
vm.ok = !vm.ok
},1000)
</script>
贝贝呈现每隔一秒弹出的效果
2、v-if和v-else:根据表达式的真假值来动态插入和移除元素
<div id="app">
<div v-if="role == '珊珊'">
<h2>欢迎大美女</h2>
</div>
<div v-else-if = "role == 'lala'">
<h2>欢迎小龙女</h2>
</div>
<div v-else>
<h2>欢迎猪猪侠</h2>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
role:"lala",
role:'珊珊',
role:'jjg'
}
})
</script>
隐藏上面的元素值,只显示最后一个元素值
v-if和v-show的区别
1、v-if 是创建和删除节点、v-show是隐藏和显示节点
2、v-if则是控制元素在dom树中的添加与删除,v-show是通过控制元素的CSS属性——display的值(none 或 block)从而达到实现控制元素的显示与隐藏。
3、v-if是惰性的,只有在条件为真时开始局部编译,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
两者的实现方式不同,决定了两者有不同的应用场景:
v-if由于是直接添加、删除dom元素,因此每次切换v-if的值都会导致dom树产生渲染消耗,所以v-if适用于不需要频繁更改显示状态的情况;比如说一刷新进入页面的状态最好使用v-if,消耗的性能小。
而v-show只是控制元素的display值,因此频繁切换v-show的取值也不会造成多次渲染,浪费资源,适用于需要频繁切换显示、隐藏状态的应用场景,比如说某个按钮经常会点击。