Time: 20190911
v-if + v-else配合使用
在HTML模板中引入控制逻辑，使得编写前端代码更加灵活。
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 name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 --> </head> <body> <div id="app"> <p v-if="hours < 12">早上好！</p> <p v-if="hours >= 12 && hours < 18">中午好！</p> <p v-if="hours >= 18">下午好！</p> <p>Hello {{ greetee }} !</p> <p v-if="path==='/">处于首页</p> <p v-else>正处于{{ path }}</p> </div> <script> var app = new Vue( { el: '#app', data: { hours: new Date().getHours(), greetee: 'world', path: location.pathname, }, } ) </script> </body> </html>
v-if和v-else出现在相邻的位置上。
v-if和v-show
简单来说，v-if指令判断结果为False，则不会显示DOM元素，显示或者不显示的方式是插不插入真实的DOM元素。
而v-show则是通过CSS样式来控制元素的显示和隐藏。
1
2
3
4
5
6
7
8
9
10<div v-if="true">one</div> <div v-if="false">two</div> ⇒ 输出：<div>one<div> <div v-show="true">one</div> <div v-show="false">two</div> ⇒ 输出： <div>one<div> <div style="display: none">two<div>
更直白一点说就是，没经过v-if判断的，都没有机会生成HTML代码，没经过v-show判断的，代码还是会生成的，甚至生成的还更复杂，带上了CSS样式控制。
现实使用时，用v-if更加，因为有些情况下，用的元素判断，该元素不存在，不生成HTML比较好，但用v-show会去访问不存在元素的属性，就会报Bug。
但是v-if的开销比v-show要大，因为它会频繁操作DOM树。
尤其是在频繁切换显示的场景下，用v-show更好。
模板循环：v-for指令
显然这是很好的遍历手段，比如遍历数组，对象等。
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
37<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 --> </head> <body> <div id="app"> <ul> <li v-for="dog in dogs">{{ dog }}</li> </ul> </div> <script> var app = new Vue( { el: '#app', data: { dogs: [ 'Rex', 'Rover', 'Henrietta', 'Alan' ] }, created() { // 应用启动时执行 console.log("应用启动...") } } ) </script> </body> </html>
遍历数组显示效果
下面是遍历对象的写法：
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
37
38
39
40<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 --> </head> <body> <div id="app"> <ul> <li v-for="(rent, city) in avgRent">{{ city }}的平均租金为{{ rent }}</li> </ul> </div> <script> var app = new Vue( { el: '#app', data: { avgRent: { London: '$1650', Paris: '$730', NYC: '$3680' } }, created() { // 应用启动时执行 console.log("应用启动...") } } ) </script> </body> </html>
显示效果：
属性绑定：v-bind
v-bind的作用是，将一个值绑定到HTML属性上。
比如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<body> <div id="app"> <button v-bind:type="buttonType">Test Button</button> </div> <script> var app = new Vue( { el: '#app', data: { buttonType: 'submit' }, created() { // 应用启动时执行 console.log("应用启动...") } } ) </script> </body>
这段代码里，v-bind是指令的名称，type是指令的参数，在本例中是属性的名称，将给定的变量绑定到这个属性即可，buttonType是在data中定义的变量。
不仅是type，还可以绑定到disabled, checked等属性名称上。
这种是完整的写法，由于数据绑定是非常普遍的操作，Vue提供了简写法，只需要在参数前面加冒号即可。
1
2<button :type="buttonType">Test Button with no v-vind </button>
效果是一样的。
两种写法取一种即可，保持代码风格的统一很重要。
END.
最后
以上就是活力机器猫最近收集整理的关于Vue之v-if, v-else, v-show, v-for, v-bind的全部内容，更多相关Vue之v-if,内容请搜索靠谱客的其他文章。
发表评论 取消回复