How uniapp uses conditional rendering and list rendering

Uniapp uses conditional rendering and list rendering methods: 1. [v-if] instruction is used to conditionally render a piece of content; 2. [v-show] displays elements according to conditions; 3. Use [v -for] directive renders a list based on an array.

The operating environment of this tutorial: windows7 system, uni-app2.5.1 version. This method is suitable for all brands of computers.

Recommended (free): uni-app development tutorial

How to use conditional rendering and list rendering in uniapp:

1. Conditional rendering

1. The v-if instruction is used to conditionally render a piece of content

Vue is awesome!
data:function() {
    return {
       awesome:true     //true或false
    }
}

2. You can also use v-else to add an "else block ”

Vue is awesome!
Oh no
data:function() {
    return {
  awesome:true    //为true时正常显示，为false时显示Oh no
    }
}

3.v-else-if, acts as the “else-if block” of v-if, and can be used continuously

A
B
C
Not A/B/C
data:function() {
    return {
    type:'A'   //A或B或C  什么都不写的话则显示 Not A/B/C
    }
}

4.v-show, displays elements based on conditions

Hello!
data:function() {
    return {
 ok:true    //为true时显示Hello!，为false时则不显示
    }
}

5. The difference between v-if and v-show

v-if is "real" conditional rendering, which will ensure that the event listeners and subcomponents within the conditional block are appropriate during the switching process Land was destroyed and rebuilt. (Use when running conditions rarely change)

v-show Elements will always be rendered and remain in the DOM. v-show simply toggles the element's CSS property display (none/block). (Use when switching frequently)

2. List rendering

1. Use the v-for instruction to render a list based on an array. A special syntax of the form item in items is required, where items is the source data array and item is an alias for the array element being iterated over.

{{index}} : {{item.msg}}
data:function() {
return {
items:[
{msg:'Foo'},
{msg:'Bar'}
]
}
}

2. Use objects in v-for

{{key}} : {{value}}
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2020-3-10',
}

The results of the above two examples are as follows:

##Related free Learning recommendation:

php programming (video)

The above is the detailed content of How uniapp uses conditional rendering and list rendering. For more information, please follow other related articles on the PHP Chinese website!