1、传统的方法就是通过设置wx:if="{{变量}}",把变量放到js的data中,然后通过js的各种事件来改变data中该变量的值,从而达到该样式的存在和消失。
案例:
<view>
<view class="b" wx:if="{{isShow}}">大家好</view>
<button bindtap="change">点击</button>
</view>
.b {
width: 500rpx;
height: 400rpx;
background-color: blue;
}
data: {
isShow: true
}
change() {
this.setData({
isShow: false
})
}
2、通过控制class="{{变量}}"的值来完成不同的样式,同样是把该把变量放到js的data中,然后通过js的各种事件来改变data中该变量的值(值要用双引号)。
案例:
<view>
<view class="{{name}}">大家好</view>
<button bindtap="change">点击</button>
</view>
.b {
width: 500rpx;
height: 400rpx;
background-color: blue;
}
.d {
width: 200rpx;
height: 100rpx;
background-color: red;
}
data: {
class: "b"
}
change() {
this.setData({
class: "d"
})
}