Day3 v-show和v-if
v-show
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!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">
<title>V-show</title>
</head>
<body>
<div id="app">
<img src="../img/2.jpg" v-show="age>=18">
<input type="button" value="+" @click="Addage">
<input type="button" value="-" @click="reduceage">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:17
},
methods:{
Addage:function(){
this.age++;
},
reduceage:function(){
this.age--;
}
}
})
</script>
</body>
</html>
|
v-if
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!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">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="isshow">陈建</p>
<p v-show="isshow">陈建 v-show</p>
<input type="button" value="改变显示状态" @click="show">
<h2 v-if="wendu>=35 ">热死啦</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isshow:true,
wendu:30
},
methods:{
show:function(){
this.isshow=!this.isshow
}
}
})
</script>
</html>
|
v-show和v-if的区别
显示切换，事件绑定
- v-show，根据真假切换元素的显示状态；原理是修改元素的display，实现显示隐藏；
指令后边的内容，最终都会解析为布尔值；值为true元素显示，值为false元素隐藏；
数据改变后，对应的元素的显示状态会同步更新。
- v-if，根据真假切换元素的显示状态；本质是操纵DOM元素来切换显示状态；
表达式的值为true，元素存放于dom树中，为false,从dom书中删除。
频繁切换用v-show，反之用v-if，前者的切换消耗小。