微信小程序数据类型，遍历，展示

最新推荐文章于 2024-08-19 20:59:40 发布

【小白撑伞】

最新推荐文章于 2024-08-19 20:59:40 发布

阅读量1.5k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序前端小程序

本文链接：https://blog.csdn.net/qq_44892120/article/details/121067810

版权

微信小程序专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍了微信小程序中数据类型的使用，包括字符串、数字、布尔型、对象和数组等，并展示了如何在WXML文件中进行数据绑定和遍历。同时，讲解了条件渲染的技巧，如wx:if和hidden属性的使用，以及数组和对象的循环渲染。内容覆盖了小程序开发的基础核心概念，适合初学者参考学习。

摘要由CSDN通过智能技术生成

微信小程序数据类型，遍历，展示

备注：

text 相当于以前web中的 span标签行内元素不会换行
view 相当于以前web中的 div标签块级元素会换行
checkbox 以前的复选框标签

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello 小白",
    num: 10000,
    isBoy: true,
    person: {
      age: 74,
      name: "富婆"
    },
    isChecked:true,
    list:[
      {
        id:1,
        name:"猪八戒"
      },
      {
        id:2,
        name:"天蓬元帅"
      },
      {
        id:3,
        name:"悟能"
      }
    ]
  }

})

wxml 文件
1.基本类型


<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否是帅哥: {{isBoy}} </view>
<!-- 4 object类型 -->
<view>年龄：{{person.age}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>
<!-- 6 使用bool类型充当属性 checked   -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>
<view>{{list[0].name}}</view>
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<view>{{11%2==0 ? '偶数' : '奇数'}}</view>

2.数组和对象

<!-- 7.数组循环 -->
<view>数组循环</view>
  <view wx:for="{{list}}" wx:key="index">
    索引：{{index}}---值{{item.name}}
  </view>

      <!-- 自定义名字 ；默认不写，嵌套循环要写-->
  <view wx:for="{{list}}" wx:key="*this" wx:for-item="mylist" wx:for-index="myindex">
    索引：{{myindex}}---值{{mylist.name}}
  </view>
  <!-- 8.对象循环 -->
 <view>对象循环</view>
  <view wx:for="{{person}}" wx:key="age">
    索引：{{index}}---{{item}}
  </view>
    <!-- 自定义名字 ；默认不写，嵌套循环要写-->

  <view wx:for="{{person}}" wx:for-item="value"  wx:for-index="key" wx:key="age">
    索引：{{key}}---{{value}}
  </view>

3.条件渲染
什么场景下用哪个：
①当标签不是频繁的切换显示优先使用 wx:if
直接把标签从页面结构给移除掉
②当标签频繁的切换显示的时候优先使用 hidden
通过添加样式的方式来切换显示
hidden 属性不要和样式 display一起使用

<view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

  <view wx:if="{{flase}}">1</view>
  <view wx:elif="{{flase}}">2 </view>
  <view wx:else> 3 </view>

  <view hidden >hidden1</view>
  <view hidden="{{false}}" >hidden2</view>```