uniapp如何使用条件渲染和列表渲染-uni-app-PHP中文网

uniapp使用条件渲染和列表渲染的方法：1、【v-if】指令用于条件性地渲染一块内容；2、【v-show】根据条件展示元素；3、用【v-for】指令基于一个数组来渲染一个列表。

uniapp如何使用条件渲染和列表渲染

本教程操作环境：windows7系统、uni-app2.5.1版本，该方法适用于所有品牌电脑。

uniapp使用条件渲染和列表渲染的方法：

一、条件渲染

1.v-if 指令用于条件性地渲染一块内容

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

2.也可以用 v-else 添加一个“else 块”

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

3.v-else-if，充当 v-if 的“else-if 块”，可以连续使用

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

4.v-show，根据条件展示元素

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

5.v-if 与 v-show的区别

跨平台移动App开发引擎CrossApp

CrossApp是一款完全免费、开源、跨平台的移动app开发引擎，由9秒技术团队负责更新和维护。CrossApp拥有跨平台、整合部分第三方库、基于基于OpenGL ES 2.0、丰富的UI控件、提供CrossApp配套编辑器，以及CrossApp Style体系的支撑，所以开发者可以完全免费、毫无顾忌的使用CrossApp开发任何商业项目。CrossApp以C++作为开发语言，支持js，图形渲染基

下载

v-if 是“真正”的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。（在运行条件很少改变时使用）

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display（none/block）。（频繁地切换时使用）

二、列表渲染

1.用 v-for 指令基于一个数组来渲染一个列表。需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

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

2.在 v-for 里使用对象

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

上面两例结果如下图：

相关免费学习推荐：php编程（视频）