v-else-if 使用实例：

<div id="vApp">
    <!--v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用-->
    <input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp">
    <h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2>
    <h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2>
    <h2 v-else-if="calLen(inp)>0">输入了字符</h2>
    <h2 v-else>没有输入字符</h2>
    <div>
        <!--也可以使用 v-show 指令来根据条件展示元素-->
        <img src="../asset/img/ic_user.png" v-show="calLen(inp)<=0">
        <img src="../asset/img/ic_question.png" v-show="calLen(inp)>0">
        <img src="../asset/img/ic_stop.png" v-show="calLen(inp)>5">
        <img src="../asset/img/ic_info.png" v-show="calLen(inp)>10">
    </div>
</div>

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

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

v-if 与 v-show 的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

<div id="app">

    <div v-if="Num > 0.5">

      随机数为 {{ Num}} 大于0.5

    </div>

    <div v-else>

     随机数为 {{ Num}} 小于或等于 0.5

    </div>

</div>

new Vue({

  el: '#app',

  data:{

       Num:Math.random()

    }

})

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

青春年少时我并不曾懂得自己那些快意活法都是来自父母的躬身托起我迷席慕蓉的诗

做琼瑶的粉

为赋新词强说愁唯独没想过父母的辛苦和劳累

众生皆苦没有人会被命运额外眷顾

如果你活得格外轻松顺遂

一定是有人替你承担了你该承担的重量