小程序点击按钮显示隐藏

mh_code

于 2020-04-07 15:05:50 发布

阅读量5.4k

点赞数 1

分类专栏：前端 vue js 文章标签： vue.js javascript

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

版权

前端同时被 3 个专栏收录

16 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

8 篇文章

订阅专栏

wxml：

<view >
    <button class="{{showView?'show':'hide'}}" bindtap="change">{{showView?'隐藏':'显示'}}</button>
    <button class="{{showView?'hide':'show'}}" bindtap="change">{{showView?'隐藏':'显示'}}</button>
  </view>
  <view class="{{showView?'show':'hide'}}">
    <text class="text">隐藏控件</text>
  </view>

wxss：

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

js：

data: {
    showView: true
  },
  onLoad: function (options) {
    showView: (options.showView == "true" ? true : false)
  },
  change: function () {
      var that = this;
      that.setData({
      showView: (!that.data.showView)
    })
  },