02uni-app v-for循环列表 v-if的使用

简介: 02uni-app v-for循环列表 v-if的使用

onLoad onShow onHide函数的使用##


这三个函数的使用
  // 监听页面的加载  参数e是上一个页面传递过来的参数  参数是一个对象  如果没有为空{}
    onLoad(e) {
      console.log(e);
    },
    // 监听页面的显示
    onShow(e) {
      console.log("onShow",e);
    },
      // 监听页面的隐藏 当隐藏这个页面的时候,就会触发
    onHide(e) {
      console.log("onHide",e);
    },


02===>如何循环列表


使用v-for哈 跟vie是一样的哈


<view v-for="(item,index) in listarr" :key="index">
         姓名{{item.name}}
 </view>     
 listarr:[
  {id:1,name:"张三"},
  {id:2,name:"李四"},
  {id:3,name:"王武"}
 ]


03==》v-if的使用  跟vue一样的哈

 

<view v-if="test">我能够显示吗</view>


test:true, //如果值是true  显示  false隐藏哈

 

04==》:idden


<view :hidden="test2">我能够显示吗2</view>


test2:false,//false可以显示  true隐藏哈

 

05==》v-if和:hidden的区别是


v-if会根据条件来判断 是否渲染


:hidden  一开始是渲染出来的  然后在根据条件  来判断是否进行渲染哈!!



相关文章
uni-app 172标签列表和标签用户列表
uni-app 172标签列表和标签用户列表
135 1
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
108 0
|
4月前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
90 4
|
4月前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
86 4
|
4月前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
90 1
|
4月前
|
JSON 前端开发 数据挖掘
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动
80 0
|
4月前
|
JSON 前端开发 数据格式
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(12)
上一节我们实现了商品详情页面的规格选择弹窗,这在任何购物类应用中都是最常用的功能之一。当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车内简单展示的功能
78 0
|
8月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
207 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
899 11
|
11月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
157 2

热门文章

最新文章