微信初始 for if 绑定数据修改数据

最新推荐文章于 2024-08-06 20:04:10 发布

jialan75

最新推荐文章于 2024-08-06 20:04:10 发布

阅读量180

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/jialan75/article/details/124172732

版权

这个示例展示了如何在微信小程序中通过WXML和JS实现动态过滤数据，根据用户点击按钮选择只显示男生或女生。index.wxml定义了一个列表，用于展示包含姓名、年龄和性别的数据，同时有两个按钮分别触发showMan和showWoman函数，更新显示的性别。index.js中定义了数据数组和两个方法，用于切换显示的性别。

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

1. wxml 部分

<!--index.wxml-->
<view id="index"> 
  <view class="p" wx:for="{{array}}" wx:if="{{item.sex==flag}}">
  姓名：{{item.name}}
  年龄：{{item.age}}
  性别：{{item.sex}}
  </view>
  <button bind:tap="showMan">只展示男生</button>
  <button bind:tap="showWoman">只展示女生</button>
</view>

2. js部分

// index.js
Page({
  data:{
    array:[
        {
          name:'张三',
          age:'18岁',
          sex:'男',
        },
        {
          name:'李四',
          age:'20岁',
          sex:'男',
        },
        {
          name:'王祺',
          age:'30岁',
          sex:'女',
        },
    ],
    flag:'男' 
  },
  showMan(){  
    this.setData({
      flag:'男'
    })
      console.log('男生')
  },
  showWoman(){
    this.setData({
      flag:'女'
    })
    console.log('女生')
  }

})

json部分

{
  "navigationBarTitleText": "宠物帮领养中心",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#ff6034",

  "usingComponents": {}
}

wxss 部分

/**index.wxss**/

/* #index{
  display: flex;
} */
.p{
  width: 100%;
  border: 2rpx solid #ccc;
  text-align: center;
  margin: 20rpx;
}