微信小程序开发学习笔记——3.3data中不同数据类型渲染及if条件渲染

最新推荐文章于 2024-12-17 10:06:24 发布

Qy_cm

最新推荐文章于 2024-12-17 10:06:24 发布

阅读量479

点赞数 6

分类专栏：小程序开发学习笔记文章标签：学习笔记

本文链接：https://blog.youkuaiyun.com/Qy_cm/article/details/136140334

版权

小程序开发学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在微信小程序中使用WXML进行数据类型渲染，包括对象嵌套、数组展示以及if条件语句的应用，通过实例演示了如何在data.js和data.wxml中处理不同数据结构的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：

https://www.bilibili.com/video/BV19G4y1K74d?p=17&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、data中不同数据类型渲染

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

data.js文件的data部分：

data: {
    name:"张三",
    age:18,
    bool:true,
    books:["孙子兵法","红楼梦"],
    user:{
      name:"高启强",
      age:50,
      gender:"男"
    }
  },

data.wxml中代码

<!--pages/data/data.wxml-->
<text>pages/data/data.wxml</text>
<view>
  我的名字是：{{name}}
</view>
<view>
  年龄：{{age}}
</view>
<view>
  书籍：{{books}}
</view>
<view>
  用户：{{user.name}}-{{user.age}}-{{user.gender}}
</view>
<view>
  {{user.name+"-"+user.age+"-"+user.gender}}
</view>

二、if条件渲染

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

data.js文件的data部分：

// pages/data/data.js
Page({
  data: {
    name:"张三",
    age:18,
    bool:true,
    books:["孙子兵法","红楼梦"],
    num:6,
    user:{
      name:"高启强",
      age:50,
      gender:"男"
    }
  },
})

data.wxml中添加以下代码

<text wx:if="{{num==1}}">1</text>
<text wx:elif="{{num==2}}">2</text>
<text wx:elif="{{num==3}}">3</text>
<text wx:elif="{{num==4}}">4</text>
<text wx:elif="{{num==5}}">5</text>
<text wx:else>格式错误</text>

因为data中num为6，所以最后会显示格式错误