# 微信组件Component中的methods修改data里的值方法

最新推荐文章于 2026-07-21 10:11:06 发布

原创最新推荐文章于 2026-07-21 10:11:06 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

当前文章被收录于：

微信小程序

2 篇文章 0 人学习

订阅专栏查看详情

前端

当前文章被收录于：

前端

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文探讨了在微信小程序的Component组件中，如何通过methods方法有效地修改data属性的值，包括在WXML和组件JS中的实现细节。

微信组件Component中的methods修改data里的值方法

微信WXML

<view class="navigationBar">
    <view class="wrap">
        <view class="menu">
            <view class="{{menuBtnStatus}}" bindtap="menuStatus">
                <view class="menuBtn1"></view>
                <view class="menuBtn2"></view>
                <view class="menuBtn3"></view>
            </view>
            <view class="menuListWrap">
            
            </view>
        </view>
        <view class="search"></view>
    </view>
</view>

组件js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    menuBtnStatus:"menuBtn"
  },
  

  /**
   * 组件的方法列表
   */
  methods: {
    //控制按钮状态的方法
    menuStatus:function(){
      //修改data值
      this.setData({ 
        menuBtnStatus:this.data.menuBtnStatus=="menuBtn"?"menuBtnactive":"menuBtn"
      })
      
    },
  }
})