在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)
Vue语法与JavaScript一样写在script中,通过id选择器绑定DOM,在Vue中,只需要在el中对DOM的id进行挂载,可以简单的理解为钩子,el通过id=”app”的特征钩住了
vue基本指令
本质就是自定义属性
Vue中指令都是以 v- 开头
v-cloak
防止页面加载时出现闪烁问题
v-text
v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
领取专属 10元无门槛券
手把手带您无忧上云