Vue-条件渲染

条件渲染

v-if

动态创建和删除

• 用法：

  根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ` ，将提出它的内容作为条件块。

  当条件变化时该指令触发过渡效果。

  当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

• 参考：条件渲染 - v-if

<div id="box">
    <div v-if="datalist.length">
        <ul>
            <li v-for='data in datalist'>
                {{data}}
            </li>
        </ul>
    </div>
</div>

v-else

• 不需要表达式

• 限制：前一兄弟元素必须有 v-if 或 v-else-if。

• 用法：

  为 v-if 或者 v-else-if 添加“else 块”。

  可以用于购物车空空如也和有数据的状态切换

  <div v-if="Math.random() > 0.5">
      Now you see me
  </div>
  <div v-else>
      Now you don't
  </div>
  

• 参考：条件渲染 - v-else

v-else-if

2.1.0 新增

• 类型：any

• 限制：前一兄弟元素必须有 v-if 或 v-else-if。

• 用法：

  表示 v-if 的 “else if 块”。可以链式调用。

  可以用于购物车的状态

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

• 参考：条件渲染 - v-else-if

template v-if

在元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含 元素。

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

v-show

• 预期：any

• 用法：

  根据表达式之真假值，切换元素的 display CSS 属性。

  当条件变化时该指令触发过渡效果。

• 参考：条件渲染 - v-show