uniapp小程序实现点击当前盒子添加选中样式,其他盒子选中样式消失
时间: 2023-08-18 12:05:08 浏览: 69
可以通过使用 v-for 循环渲染多个盒子,然后给每个盒子绑定一个点击事件,当点击某个盒子时,将该盒子的选中状态改变,并将其他盒子的选中状态清除。具体实现可以参考以下代码:
在 template 中:
```html
<view v-for="(item, index) in list" :key="index" :class="{ 'active': item.active }" @tap="handleTap(index)">{{ item.text }}</view>
```
在 script 中:
```javascript
export default {
data() {
return {
list: [
{ text: '盒子1', active: false },
{ text: '盒子2', active: false },
{ text: '盒子3', active: false },
{ text: '盒子4', active: false }
]
};
},
methods: {
handleTap(index) {
this.list.forEach((item, i) => {
if (i === index) {
item.active = !item.active;
} else {
item.active = false;
}
});
}
}
};
```
在上述代码中,list 数组中存储了多个盒子的数据,包括文本和选中状态。使用 v-for 循环渲染多个盒子,并绑定一个点击事件 handleTap。在 handleTap 方法中,遍历 list 数组,如果当前盒子的索引等于点击的盒子索引,则将当前盒子的选中状态改变,否则将当前盒子的选中状态清除。最后使用 :class 绑定样式,根据盒子的选中状态来添加或移除样式。