小程序金额显示隐藏

最新推荐文章于 2022-11-29 10:01:17 发布

mh_code

最新推荐文章于 2022-11-29 10:01:17 发布

阅读量874

点赞数

分类专栏：前端 vue js 文章标签：小程序 javascript

本文链接：https://blog.youkuaiyun.com/ma_hao99/article/details/105366750

版权

前端同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

8 篇文章

订阅专栏

要求上面的金额显示隐藏。

wxml：

<view class="month-spendingBox">
    <view class="month-spendingInwrap" bindtap="eyeChange">
      <text>本月支出 (元)</text>
      <view class="spending-eyeBox"><image src="../img/bz04.png" mode="widthFix" class="spending-eye"></image></view>
    </view>
  </view>
  <view class="spendingNum">
    <view class="{{showView?'show':'hide'}}">{{spendingNum}}</view>
    <view class="{{showView?'hide':'show'}}">{{spendingHideNum}}</view>
  </view>

wxss：

.hide{
  display: none;
}
.show{
  display: block;
}

js：

data: {
    showView: true
   
  },
  // 隐藏金额
  eyeChange: function(){
    this.setData({
      spendingNum: this.data.spendingHideNum,
      spendingHideNum: this.data.spendingNum
    })
    
  },
  onLoad: function (options) {
    showView: (options.showView == "true" ? true : false)
  },
  eyeChange: function () {
      var that = this;
      that.setData({
      showView: (!that.data.showView)
    })

  },