微信小程序选中改变样式，选中取消，限制选中个数

先在data中写一个变量专门用来改变状态

Page({

      data: {
        change: false
       },

    
})

选项：

<!--wxml-->
 <view class="{{change? 'choose':'no_choose'}}" catchtap="changeto">选项</view>

然后是js里的方法：

changeto: function(e) {
 
        if (this.data.change== false) {
          this.setData({
            change: true
          })
        } else {
          this.setData({
            change: false
          })
        }
}

判断当前状态，点击时如果是false就改变成true，在wxml里false和true关联view标签的样式。

我设置的样式：

.no_choose{
  display: flex;
  align-items: center;
  width: 180rpx; 
  height: 100rpx;  
  border: 3rpx solid blue;  
  justify-content: center;
  margin-left: 30rpx;  
  margin-top: 60rpx;
  font-size: 25rpx;
  
}
.choose{
  display: flex;
  align-items: center;
  width: 180rpx; 
  height: 100rpx;  
  border: 3rpx solid orange;  
  justify-content: center;
  margin-left: 30rpx;  
  margin-top: 60rpx;
  color: orange;
  font-size: 25rpx;
}

如果由多个选项，就要有多个不同的方法和决定状态的变量。

如果多个选项中仅允许选一个在外面包一个if：

changeto1: function(e) {
        if ( this.data.change2 == false && this.data.change3==false) {
        if (this.data.change1 == false) {
          this.setData({
            change1: true
          })
        } else {
          this.setData({
            change1: false
          })
         }
        }
},