vue指令v-if，v-else-if，v-else

vue指令v-if,v-else-is,v-else

v-if

v-if指令用来根据其表达式的真假条件渲染元素。当表达式的值为 true时，对应的元素或组件会被渲染；反之，则不会被渲染到 DOM 中。

v-if是条件性地从 DOM 中添加或移除元素。

v-esle-if

v-else-if指令，顾名思义，作为 v-if的“else-if 块”，用于链式地表达多个条件。

必须紧跟在带 v-if或 v-else-if的元素之后使用，否则它将不会被识别。

可以有多个 v-else-if。

v-else

v-else指令用来表示 v-if或 v-else-if的“else 块”，当所有的 v-if和 v-else-if条件都不满足时，将渲染 v-else所在的元素或组件。

v-else元素必须紧跟在带 v-if或 v-else-if的元素之后。

实例

html

    <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>
        非 A/B/C 类型的内容
      </div>
    </div>

javascript

    let vm = new Vue({
      el: '#app',
      data: {
        type: 'B'
      }
    });