what are the types of logical rendering and their corresponding directives-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

Logical rendering uses directives to control conditional display and list iteration in templates.

Conditional rendering

v-show

The v-show directive toggles the visibility of a node. The node is always rendered, regardless of whether the v-show expression evaluates to true or false.

When v-show evaluates to true, display: flex is added to the node's CSS style.
When v-show evaluates to false, display: none is added to the node's CSS style.

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

v-if

The v-if directive conditionally renders a block of content. The block is rendered only when the expression evaluates to true.

v-else-if serves as an "else-if block" for v-if. Multiple v-else-if blocks can be chained.
v-else serves as an "else block" for v-if.

<div class="div" v-if="exist(a)">
  ...
</div>
<div class="div" v-else-if="exist(b)">
  ...
</div>
<div class="div" v-else>
  ...
</div>

Important

A v-else-if block must immediately follow a v-if block. Otherwise, it will not be recognized.
A v-else block must immediately follow a v-if or v-else-if block. Otherwise, it will not be recognized.
Do not use v-if on the root node of a template.

List rendering

v-for

The v-for directive renders a block of content repeatedly based on an array, a number, or an object. Six syntaxes are supported:

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>

Note

The v-for directive does not support nesting. Do not use a v-for directive inside another v-for rendering block.
When rendering data based on an object, the display order of the items is not guaranteed. To display items in a specific order, traverse an array or number instead.
Do not use v-for on the root node of a template.

Sample code

Click detailLogicalRender.zip to download the complete sample code.