Question

当我在下面的代码中切换变量active时，会在列表中的所有元素中应用/删除active CSS类。如何单独定位列表元素？ Todo-List示例具有类似的功能（已完成todo / todo），但它有点超出我的技能组合。

<ul>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 1</li>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 2</li>
    <li v-bind:class="{ active: active }" v-on:click="toggleActive">Test 3</li>
</ul>

toggleActive: function() {
    this.active = !this.active;
}

Answer 1

一种方法是将每个状态存储在item对象中。所以你需要创建一个items数组，每个item都有结构：

{ 
    text: "item #"
    active: true
}

注意我在调用toggleActive方法时传递了项目引用。

<li v-for="item in items" 
    v-bind:class="{ active: item.active }" 
    v-on:click="toggleActive(item)">
    {{ item.text }}
</li>

toggleActive: function(item) {
    item.active = !item.active;
    console.log(item);
}

这是一个工作示例：https://jsfiddle.net/pkwroL5L/1/

希望有所帮助！

Answer 2

如果你想通过 VueJS 以编程方式切换单个元素的类

VueJS 允许你将锚标签的类（例如）直接绑定到 li 元素的索引，这样当绑定到索引的 vuejs 变量发生变化时，类也会发生变化。查看这两个链接了解更多详情

这是解决方案的关键

:class="{current:i == current}

在下面的小提琴和另一篇文章中可用，以博客格式解释如何在 vuejs 中动态控制锚类

https://jsfiddle.net/Herteby/kpkcfcdw/

https://stackoverblow.wordpress.com/2021/04/03/how-modern-javascript-makes-click-simulation/

如何切换单个<li>元素的类？

2 个答案: