微信小程序点击实现隐藏和点击实现显示

组件显示的方法：即是定义组件的表现形式

display: none;

wxml文件：

<view >
<button  class="hide{{showView?'show':''}}" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>
//？:即表示了一种选择关系
<button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">{{showView?'隐藏':'显示'}}</button>
</view>
<view class="hide{{showView?'show':''}}">
<text class="text">我是被显示被隐藏控件</text>
</view>

wxss文件

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

js文件

Page({
data: {
showView: true
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
showView: (options.showView == "true" ? true : false)
}
, onChangeShowState: function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
}
})

注意理解其中的选择关系，我这里有两个botton组件，但是显示的时候实际可以看到的只有一个

因为当点击的时候，另一个组件被隐藏了，也就是display方式改变了，在这个地方也就可以理解

为有一个循环关系，也就是上一个组件被后面的组件覆盖了

也就实现了用户的一种交互操作