微信小程序中，点击wx:for渲染的数据，view里的文字颜色改变、展示不同的内容

wxml代码：

<!-- 这是要展示的规格 -->
<view wx:for="{{spec}}" wx:key="id" bindtap='selShopTc' data-index="{{index}}" style='{{key==index?"color:red;":""}} z-index:999;' class='spec'>
  <view>{{item.title}}</view>
</view>
<!-- 这是默认展示的价格 -->
<view wx:if="{{boolean == true}}">
  <text>￥100</text>
</view>
<!--这是不同规格要展示的价格-->
<view wx:if="{{boolean == false}}">
  <text> {{r}}{{jiage}}</text>
</view>

js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    boolean:true,
    spec: [{
      title: "规格一"
    }, {
      title: "规格二"
    }, {
      title: "规格三"
    }, {
      title: "规格四"
    }, {
      title: "规格五"
    }],
    r: '',
    jiage: '',
    items: [{
        price: "28"
      },
      {
        price: "30"
      },
      {
        price: "49"
      },
      {
        price: "69"
      },
      {
        price: "3"
      }
    ],
  },
  selShopTc: function(res) {
    console.log(res)
    var array = this.data.items;
    var curIdx = res.currentTarget.dataset.index;
    var contentPrice = this.data.items[curIdx].price;
    var contentStock = this.data.items[curIdx].stock;
    this.setData({
      key: res.currentTarget.dataset.index, //获取点击的当前规格的index
      jiage: contentPrice,
      r: "￥",
      boolean:false
    })
  }
})

wxss代码：

wxss代码：

.spec{
  margin:20rpx
}
.spec view{
  width:130rpx;
  height:70rpx;
  float: left;
  background:#eee;
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-content: center
}

效果图