Mobile Platform as a Service:Logical rendering

Conditional rendering

v-show

v-show instructions are used to conditionally render the content of a node. The node is rendered regardless of whether the result of the v-show instruction is true or false.

• If the v-show result is true, it is equivalent to adding a display: flex to the CSS style of the node.

• If the v-show result is false, it is equivalent to adding a display: none to the CSS style of the node.

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

v-if

v-if instructions are used to conditionally render a piece of content. This piece of content will only be rendered when the expression of the directive returns a true.

• You can use v-else-if to act as v-if "else-if blocks" that can be used consecutively.

• You can use v-else to act as "else blocks" 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>

List rendering

vfor

v-for instructions may render a set of data based on an array /number/ object. Currently, six methods 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>