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

用wx:for渲染数据，不确定有多少条数据，要使得点击当前数据获取当前数据的下一级数据，描述可能会不太清楚，就是实现图中这种功能：


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代码：

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