Vue.js 条件与循环

v-else 指令
随机生成一个数字，判断是否大于0.5，然后输出对应信息：


v-else 指令
判断 type 变量的值：


v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素：

其他：
1、给 Num 绑定一下，可以看出来随机数字是多少:



2、

3、

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

这里的 ok 参数值和 JavaScript 中的判断一致，为 0、null、undefined、false 时为假，其他值为真。

4、

new Vue({
  el: '#vApp',
  data: {
    inp: ''
  },
  methods: {
    calLen: function (n) {
      if (!n) {
        return 0;
      } else {
        return n.split('').length;
      }
    }
  }
})

5、

6、
演示 v-else-if 用法，根据分数来判断等级：



7、

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
  
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: false
  }
})
</script>

当 存在于未被 vue 实例化的组件中时可以正常隐藏，天生 display：none。