逻辑渲染

条件渲染

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>

列表渲染

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>