item.isActive ?'active':''的布尔值为真时,使其他item.isActive变为空字串的wxml代码
时间: 2023-05-27 22:03:49 浏览: 85
<view wx:for="{{items}}" wx:key="index">
<view class="{{item.isActive ? 'active' : ''}}" bindtap="changeStatus">{{item.name}}</view>
</view>
<script>
Page({
data: {
items: [
{name: 'Item 1', isActive: true},
{name: 'Item 2', isActive: false},
{name: 'Item 3', isActive: true}
]
},
changeStatus: function(e) {
let index = e.currentTarget.dataset.index;
let items = this.data.items;
items[index].isActive = !items[index].isActive;
if (items[index].isActive) {
for (let i = 0; i < items.length; i++) {
if (i !== index) {
items[i].isActive = '';
}
}
}
this.setData({
items: items
})
}
})
</script>
注解:
1. 使用wx:for遍历items数组,并给每个元素绑定changeStatus事件。
2. 在事件处理函数中,通过e.currentTarget.dataset.index获取被点击元素在数组中的索引。
3. 通过索引修改该项的isActive属性为相反的布尔值。
4. 如果该项的isActive属性变为真,则遍历数组,将其他项的isActive属性置为空字符串。
5. 最后调用setData更新items数组,以更新DOM。
6. 在wxml样式中,使用三目运算符判断isActive属性值是否为真,如果为真,则添加active类样式,否则不添加。