Vue.js 条件指令 - 学习 Vue.js 2 - 简单教程，简单编程

Vue.js 内置了几个条件指令用于根据一些判断执行不同的逻辑

v-if 指令

v-if 指令用于条件判断

下面的范例在元素和 template 中使用 v-if 指令

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>简单教程</h1>
      <p>简单教程，简单编程</p>
      <p>www.twle.cn</p>
    </template>
</div>
<footer>简单教程，简单编程<br/>Copyright © 简单教程</footer>    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

运行范例 »

范例中， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

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

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

v-else 指令

v-else 指令用于给 v-if 指令添加一个 "else" 块

下面的范例随机生成一个数字，然后判断是否大于 0.5，然后输出对应信息

<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>

运行范例 »

v-else-if 指令

v-else-if 指令是 2.1.0 新增，可以和 v-if 指令和 else-if 指令一起使用，而且可以链式的多次使用

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

下面的范例判断 type 变量的值然后输出不同的内容

<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>

运行范例 »

v-show

v-show 指令用于根据条件展示元素

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

运行范例 »