微信小程序通过js改变wxml内容中的wxss样式

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"
  })
}