Vue 条件语句

最后编辑于2019-10-12 11:32:10 +0800 CST

条件判断

v-if

条件判断使用 v-if 指令:

v-if 指令:在元素 和 template 中使用 v-if 指令:

html
 1<div id="app">
 2    <p v-if="seen">现在你看到我了</p>
 3    <template v-if="ok">
 4      <h1>菜鸟教程</h1>
 5      <p>学的不仅是技术,更是梦想!</p>
 6      <p>哈哈哈,打字辛苦啊!!!</p>
 7    </template>
 8</div>
 9    
10<script>
11new Vue({
12  el: '#app',
13  data: {
14    seen: true,
15    ok: true
16  }
17})
18</script>

这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:

html
1<!-- Handlebars 模板 -->
2{{#if ok}}
3  <h1>Yes</h1>
4{{/if}}

v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块:

v-else 指令

随机生成一个数字,判断是否大于0.5,然后输出对应信息:

html
 1<div id="app">
 2    <div v-if="Math.random() > 0.5">
 3      Sorry
 4    </div>
 5    <div v-else>
 6      Not sorry
 7    </div>
 8</div>
 9    
10<script>
11new Vue({
12  el: '#app'
13})
14</script>

v-else-if

v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

v-else 指令

判断 type 变量的值:

html
 1<div id="app">
 2    <div v-if="type === 'A'">
 3      A
 4    </div>
 5    <div v-else-if="type === 'B'">
 6      B
 7    </div>
 8    <div v-else-if="type === 'C'">
 9      C
10    </div>
11    <div v-else>
12      Not A/B/C
13    </div>
14</div>
15    
16<script>
17new Vue({
18  el: '#app',
19  data: {
20    type: 'C'
21  }
22})
23</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素:

v-show 指令

html
1<h1 v-show="ok">Hello!</h1>