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

Question

active当我在下面的代码中切换变量时， activeCSS 类将从列表中的所有元素中应用/删除。如何单独定位列表元素？Todo-List 示例具有类似的功能（待办事项/待办事项已完成），但它有点超出了我的技能范围。

<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/

希望有帮助！