在Vue.js中,可以通过在v-for指令中添加@click事件来实现单击切换单个li元素的类。具体步骤如下:
data() {
return {
items: [
{ id: 1, name: 'item 1', active: false },
{ id: 2, name: 'item 2', active: false },
{ id: 3, name: 'item 3', active: false },
// 其他li元素数据...
]
}
}
<ul>
<li v-for="item in items" :key="item.id" :class="{ active: item.active }" @click="toggleActive(item)">
{{ item.name }}
</li>
</ul>
methods: {
toggleActive(item) {
item.active = !item.active;
}
}
通过以上步骤,当单击某个li元素时,会触发toggleActive方法,从而切换li元素的active属性。根据active属性的值,li元素的类会相应地切换为active类或非active类。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云