uni-app相关

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

2-7 语法速通-列表渲染

浏览 159 扫码 分享 2023-03-29 17:10:00
  • 开始
  • v-for
    • 索引号
  • 改成对象的形式。
  • 结束

    开始

    image.png
    声明一个数组
    image.png
    一般的写法是写三个
    image.png
    image.png

    v-for

    image.png

    image.png

    索引号

    image.png
    image.png
    js里面下标从0开始。index+1
    image.png

    image.png

    改成对象的形式。

    image.png
    image.png

    改成value
    image.png

    image.png

    输出正常的对象
    image.png

    结束

    若有收获，就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • socket
    • uni-app 在线拖拽平台
    • 在线客服
    • 小程序-反编译
      • 小程序转uni-app
      • 济南房选选
    • 小程序员开源项目
    • uView UI，是全面兼容nvue的uni-app生态框架
    • HBuilder X 快捷键
    • 网易云课堂uni-app
      • uni-app相关资料
        • uni-app uni.chooseImage H5端不显示图片
        • uni-app支付的插件
        • uni-app中隐藏tabbar
      • websocket教程
      • 下拉式筛选菜单
      • 所有课程地址
      • uni-app实战仿糗事百科app开发
        • 0-资料
        • 1.项目介绍
        • 2.课程更新说明
        • 3.开发环境搭建
        • 4.创建uniapp项目
        • 5.安卓真机调试配置
          • 一加8T colorOS12系统uni-app 开启真机调试
          • 红米手机进入开发者模式
        • 6.IOS真机调试配置
        • 7.微信小程序调试配置
        • 8.支付宝小程序调试配置
        • 9.引入官方css样式库
        • 10.引入自定义图标库
        • 11.引入css动画库
        • 12.设置全局属性globalStyle
        • 13.底部导航开发
        • 14.view和text组件和动画使用
        • 15.uni-app的css3选择器
        • 16.flex布局快速上手
        • 17.数据渲染
        • 18.class和style绑定
        • 19.条件渲染
        • 20.列表渲染
        • 21.事件处理器
        • 22.监听属性
        • 23.计算属性
        • 24.page.json配置
        • 25.图文、视频列表样式（上）
        • 26.图文、视频列表样式（下）
        • 27.封装列表样式组件
        • 28.滚动tab导航开发（上
        • 29.滚动tab导航开发（下）
        • 30.封装滚动tab导航组件
        • 31.上拉加载组件开发
        • 32.封装上拉加载组件
        • 33.优化图文列表组件
        • 34.封装无数据默认组件
        • 35.搜索页开发（上）
        • 36.搜索页开发（下）
        • 37.自定义导航栏开发
        • 38.textarea组件使用
        • 39.上传多图功能开发
        • 40.封装上传多图组件
        • 41.开发弹出提示框
        • 42.保存草稿功能开发
        • 43.修复自定义组件
        • 44.导航栏tab导航开发
        • 45.公共列表样式开发（上）
        • 46.公共列表样式开发（中）
        • 47.公共列表样式开发（下）
        • 48.封装公共列表组件（上）
        • 49.封装公共列表组件（下）
        • 50.封装tab导航栏组件
        • 51.tab导航栏功能实现
        • 52.上拉加载功能实现
        • 53.搜索功能开发
        • 54.轮播组件使用
        • 55.热门分类组件开发
        • 56.封装热门分类组件
        • 57.话题列表组件开发
        • 58.封装话题列表组件
        • 59.话题分类页开发
        • 60.page.json配置-话题详情页
        • 61.话题介绍组件开发
        • 62.封装话题介绍组件
        • 63.公共列表组件使用
        • 64.上拉加载实现
        • 65.下拉刷新实现
        • 66.page.json配置-小纸条功能
        • 67.小纸条列表组件开发
        • 68.封装小纸条列表组件
        • 69.下拉刷新功能实现
        • 70.上拉加载实现
        • 71.操作菜单开发
        • 72.封装操作菜单组件
        • 用户列表页-开始
        • 73.page.json配置-用户列表
        • 74.tab导航组件再次优化
        • 75.好友列表组件开发
        • 76.封装好友列表组件
        • 77.page.json配置-聊天页面
        • 78.聊天输入框组件开发
        • 79.聊天列表组件开发
        • 80.封装聊天列表组件
        • 81.完善聊天页功能
        • 82.搜索列表功能完善（上）
        • 83.搜索列表功能完善（下）
        • 84.page.json配置-内容页
        • 85.开发文章详情页信息组件
        • 86.评论列表组件开发
        • 87.评论输入框组件开发
        • 88.分享功能组件开发（上）
        • 89.分享功能组件开发（下）
        • 90.page.json配置-个人中心
        • 91.个人中心UI构建（上）
        • 92.个人中心UI构建（中）
        • 93.个人中心UI构建（下）
        • 94.设置页UI构建
        • 95.page.json配置-修改密码
        • 96.修改密码UI界面开发
        • 97.表单验证功能实现
        • 98.修改邮箱页UI界面开发
        • 99.表单验证功能实现
        • 100.编辑资料UI界面实现
        • 101.修改头像功能实现
        • 102.showActionSheet接口使用
        • 103.修改生日功能实现
        • 104.三级联动城市选择器使用
        • 105.帮助反馈UI界面实现
        • 106.关于页面UI界面
        • 107.page.json配置-登陆页
        • 108.登录页UI界面构建
        • 109.登录类型切换效果实现
        • 110.表单基础功能实现（上）
        • 111.表单基础功能实现（中）
        • 112.表单基础功能实现（下）
        • 113.第三方登录组件功能实现
        • 114.page.json配置-个人空间
        • 115.个人空间头部组件开发
        • 116.个人空间UI界面实现（一）
        • 117.个人空间UI界面实现（二）
        • 118.个人空间UI界面实现（三）
        • 119.个人空间操作菜单
        • 120.清除缓存功能
        • 121.全局方法和配置文件封装
        • 122.监听网络状态
        • 123.热更新
        • 124.动画效果优化
        • 125.后端线上环境部署流程
        • 未看完-127.api开发准备-vscode和数据库管理
        • 196.websocket快速入门
        • 197.websocket测试工具搭建
        • 198.websocket环境搭建
        • 199.聊天流程原理
        • 200.用户绑定客户端api
        • 205.部署后端源码到线上服务器
        • 206.部署https（上）
        • 207.部署https（下）
        • 209.配置wss和隐藏端口号
        • 211.封装请求模块（上）
        • 212.封装请求模块（下）
        • 213.首页交互实现
        • 214.请求错误处理封装
        • 215.首页交互实现（补充是否关注）
        • 216.文章详情页交互实现
        • 217.分享功能实现
        • 218.搜索文章功能实现
        • 219.话题专题页交互实现
        • 273.小程序自定义导航栏
        • 274.小程序分享功能实现
        • 275.隐藏版本检测更新
        • 276.微信小程序登录实现
      • uni-app实战商城类app和小程序
        • 0-资料
        • 1-项目介绍（买前必看）
        • 2-1 环境搭建和项目创建
        • 3-1 App.vue引入全局公共样式
        • 3-2 修复引入uni.css报错问题
        • 3-3 动画库使用和图标库创建
        • 3-4 编写uniapp全局样式
        • 4-1 底部导航开发
        • 5-1 基础UI库快速上手
        • 5-2 UI基础UI基础库封装（一）
        • 模板
        • 5-3 UI基础库封装（二）
        • 6-1 首页pages.json配置
        • 6-2 首页轮播图组件开发
        • 6-3 封装首页轮播图组件
        • 6-4 图标分类组件开发
        • 6-5 封装图标分类组件
      • uni-app实战仿微信app开发
        • 课时3-创建项目和开启原生渲染
        • 0-资料
        • 课时1-项目介绍
    • 2021-uni-uni-app从入门到进阶 系统完成项目实战
      • 0-资料
    • SpringBoot在线协同办公小程序开发
      • 0-资料
    • Taro
      • 0-资料
    • uni-app vue3
      • uni-app 常见错误
      • Vue3聊天实例|vue3.0 vant-ui仿微信/朋友圈
      • Vue3 和 Vite 双向加持，uni-app 性能再次提升
    • uni-app入门到实战 以项目为导向 掌握完整开发流程
      • 0-资料
      • 1-1 导学（导学不看，损失百万）
      • 1-2 应用效果展示与分析
      • 2-1 hello 小程序--入门 微信小程序（上）
      • 2-2 hello 小程序--入门 微信小程序（下）
      • 2-3 uni-app 核心知识点概览
      • 2-4 搭建uni-app开发环境
      • 2-5 语法速通-模板语法与数据绑定
      • 2-6 语法速通-条件判断
      • 2-7 语法速通-列表渲染
      • 2-8 语法速通-基础组件
      • 2-9 语法速通-自定义组件
      • 2-10 语法速通-api与条件编译
      • 2-11 生命周期概述（上）
      • 2-12 生命周期概述（下）
      • 3-1 uni-app 项目配置
      • 3-2 目录结构概述
      • 3-3 配置项目底部选项卡 - tabbar 配置
      • 3-4 在uni-app中如何使用sass
      • 4-1 认识 uniCloud开发
      • 4-2 HBuilderX 中配置 uniCloud 环境
      • 4-3 使用 uniCloud web 控制台
      • 4-4 开始使用云函数
      • 4-5 云数据库的添加和删除
      • 4-6 数据库的更新和查找
      • 4-7 使用云储存上传文件
      • 5-1 项目初始化
      • 5-2 自定义导航栏
      • 5-3 导航栏适配小程序
      • 5-4 使用字体图标
      • 5-5 选项卡展示
      • 5-6 选项卡数据初始化
      • 5-7 封装数据请求
      • 5-8 选项卡切换
      • 5-9 基础卡片视图实现
      • 5-10 更多卡片视图实现
      • 5-11 实现内容切换
      • 5-12 选项卡与内容联动
      • 5-13 内容卡片数据初始化
      • 5-14 切换选项卡懒加载数据
      • 5-15 -1 上拉加载更多（上）
      • 5-16 -2 上拉加载更多（下）
      • 5-17 -1 收藏按钮实现（上 ）
      • 5-18 -2 收藏按钮实现（下）
      • 6-1 搜索页导航栏修改
      • 6-2 使用vuex 管理历史记录
      • 6-3 -1 搜索逻辑实现（上 ）
      • 6-4 -2 搜索逻辑实现（下）
      • 6-5 搜索历史数据持久化
      • 7-1 标签管理页布局样式
      • 7-2 标签页数据处理
      • 7-3 编辑标签页
    暂无相关搜索结果！

      让时间为你证明

      展开/收起文章目录

      分享，让知识传承更久远

      文章二维码

      手机扫一扫，轻松掌上读

      文档下载

      请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度
          思维导图备注