Vue入门教程03-条件语句的渲染

基本所有的编程语言都有条件判断语句（如果你发现哪门编程语言没有，请联系我领鸡腿：594218572）；

1、v-if

v-if可以独立使用，它根据use值(true 或 false )来决定是否插入 p 元素：

<p v-if="use">The use is true!</p>

2、v-else

v-else必须与v-if配合使用：

    <p v-if="use">The use is true!</p>
    <p v-else>The use is false!</p>

3、v-else-if

如果是多级条件判断嵌套，使用v-else-if格式，如下：

<template>
  <div class="hello">
    <p v-if="msg === 'A'">The msg is A!</p>
    <p v-else-if="msg === 'B'">The msg is B!</p>
    <p v-else>The msg is other!</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'B'
      }
    }
  }
</script>

4、v-show

此外，还可以使用 v-show 指令来决定是否展示元素：

<p  v-show="use">The use is true,Show it!</p>

5、v-if与v-show的区别

v-if ：

先判断后渲染，属于惰性的（如果初始条件为假，则渲染该元素快，直到条件第一次变为真），而且在条件切换过程中，条件块内的事件监听器和子组件会适当地被销毁和重建。

v-show:

先渲染后判断，不管初始条件是什么，元素总是会被渲染，再根据条件真假来简单地基于 CSS 进行切换。

使用总结：

v-if 切换开销比较高，而 v-show 初始渲染开销比较高。所以，如果切换频繁的场景，使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

END.