文档

逻辑渲染

更新时间:

本文介绍了逻辑渲染的种类和相应的指令。

条件渲染

v-show

v-show 指令用于条件性地渲染一个节点内容。不管 v-show 指令的结果是 true 还是 false,该节点都会进行渲染。

  • v-show 结果为 true 时,相当于给该节点的 CSS 样式增加一个 display: flex

  • v-show 结果为 false 时,相当于给该节点的 CSS 样式增加一个 display: none

<div class="div" v-show="exist(exist4)"></div>

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。

  • 可以使用 v-else-if 充当 v-if 的“else-if 块”,可以连续使用。

  • 可以使用 v-else 充当 v-if 的“else 块”。

<div class="div" v-if="exist(a)">
  ...
</div>
<div class="div" v-else-if="exist(b)">
  ...
</div>
<div class="div" v-else>
  ...
</div>
注意
  • v-else-if 必须紧跟在 v-if 块后面,否则将不被识别。

  • v-else 必须紧跟在 v-ifv-else-if 块后面,否则将不被识别。

  • v-if 不能写在模板的根节点上。

列表渲染

vfor

v-for 指令可以基于一个数组 /number/ 对象来渲染一组数据。目前支持的写法有 6 种:

  • v-for="index in 10"

  • v-for="index in number"

  • v-for="item in array"

  • v-for="(item,index) in array"

  • v-for="item in object"

  • v-for="(item,key) in object"

<div class="vforStyle" v-for="(value,index) in obj">
    <text class="content">{{index + value}}</text>
</div>
说明

  • v-for 指令不支持嵌套使用,即 v-for 下面不能再使用 v-for 进行渲染。

  • 当基于对象来渲染数据时,对象显示的先后顺序不可控。如需按照确定的顺序展示,请遍历 array/number 数据。

  • v-for 不能写在模版的根节点上。

示例代码

单击此处 detailLogicalRender.zip 获取完整示例代码。