Vue的条件渲染
Contents [hide]
一 什么是条件渲染
其实就是if-else判断，只不过语法稍有区别。另外，Vue的条件判断是v-if=“xxx”，后面的双引号中的xxx本身的值是true或false时作为判断条件的。
二 示例代码
1 简单的条件渲染
22
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>if-else学习</title>6
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>7
</head>8
<body>9
<div id="app">10
<h1 v-if="awesome">Vue is awesome</h1>11
<h1 v-else>Oh no....</h1>12
</div>13
<script type="text/javascript"> 14
let app=new Vue({15
el:"#app",16
data:{17
awesome:true,18
}19
})20
</script>21
</body>22
</html>解释说明：
div id=”app”，相当于是定义view层；
当v-if=”awesome”，其中的双引号中的awesome的值为true时，在页面上显示一个html的h1标签；否则的话，就显示另外一个h1标签。
let app=new Vue，定义ViewModel层；这里的app其实是JavaScript的一个变量名，可以命名为其它名称也可以。但是，下面的el:”#app”，这里的app就必须要好前面div id=“app”中定义的变量名称相吻合。
同时，el:”#app”，表示的是挂载元素；
下面的data:是固定写法，表示的是定义model层。关键字data不可以写成其它名称，必须写成data。
2 多条件的条件渲染
34
1
2
<html>3
<head>4
<meta charset="utf-8">5
<title>多条件判断</title>6
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>7
</head>8
<body>9
<div id="app">10
<div v-if="type === 'A'">11
A12
</div>13
<div v-else-if="type === 'B'">14
B15
</div>16
<div v-else-if="type === 'C'">17
C18
</div>19
<div v-else>20
Not A/B/C21
</div>22
</div>23
24
<script>25
let app=new Vue({26
el:"#app",27
data:{28
type:"ZZZ" 29
} 30
})31
</script>32
33
</body>34
</html>解释说明：
v-if=”type === ‘A'”表示的是，双引号中的type = ==’A’这个条件表达式的计算结果当作判断条件，看其是否为true？这里的判断是两层意思，type的值要等于‘A’，同时要求type的数据类型也要和’A’相等。
三 小结
参考官方文档地址：https://cn.vuejs.org/v2/guide/conditional.html
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
当然，v-if可以脱离v-else使用单独使用。