脚本宝典收集整理的这篇文章主要介绍了uniapp如何使用条件渲染和列表渲染，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

推荐（免费）：uni-app开发教程

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的区别

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编程（视频）

以上就是uniapp如何使用条件渲染和列表渲染的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的uniapp如何使用条件渲染和列表渲染全部内容，希望文章能够帮你解决uniapp如何使用条件渲染和列表渲染所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。