区别
- 1.手段:v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式,block为显示,none为隐藏;
- 2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
- 3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留;
- 4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
使用场景
基于以上区别,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
总结
v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="button" value="点击" @click="show">
<!-- v-if v-else-if v-else
v-show的原理是:动态为元素添加或者移除display:none样式来实现元素的显示和隐藏
如果要频繁的切换元素的显示状态,用v-show性能会更好
v-if 的原理是:每次动态的创建或者移除元素 实现元素的显示和隐藏
在实际开发中 绝大多数用的是v-if
-->
<p v-if="flag"> v-if显示 </p>
<p v-show="flag"> v-show 显示 </p>
<input type="text" v-model.number="score">
<p v-if="score>=80">优秀</p>
<p v-else-if="score>=70 && score <80">良好</p>
<p v-else-if="score>=60 && score <70">及格</p>
<p v-else> 不及格 </p>
<ul v-for="(item,index) in arr " :key="index" :title="index+'***'+ item.name+'****'+item.age">
<li>{{index}} {{ item.name }} {{ item.age }} </li>
</ul>
</div>
<script>
const app =new Vue ({
el:"#app",
data:{
message:"Hello Vue!",
flag:true,
score:0,
arr:[
{
name:"小红",
age:18
},
{
name:"小平",
age:19
},
{
name:"小明",
age:20
},
]
},
methods:{
show(e){
this.flag=!this.flag;
e.target.value=this.flag==true?'显示':"不显示"
}
}
})
</script>
</body>
</html>
v-for的key的注意事项 尽量用id