Vue学习笔记（条件语句）

目录

条件判断

1.v-if的使用：

2.v-else使用：

3.v-else-if的使用：

4.v-show的使用：

---

条件判断

1.v-if的使用：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

v-if指令通过表达式seen和ok的值（true或false）来判断是否插入元素p和template。

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

2.v-else使用：

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

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

如果该随机数大于0.5，则执行Sorry；如果小于等于0.5，则执行Not sorry。

3.v-else-if的使用：

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

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

根据type的值等于“C”，结果输出：C 

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

4.v-show的使用：

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

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

结果输出Hello！

---

参考：菜鸟教程

Vue.js 条件语句 | 菜鸟教程