Vue JS中如何为单个元素切换CSS类？

你现在遇到的问题核心是：全局的isActive状态被所有任务共用了，所以点击任何一个任务都会触发所有任务的类切换。要实现仅操作点击的任务，我们需要给每个单独的todo项维护专属状态，或者直接从数组中移除对应任务，下面分两种方案给你讲解：

方案一：切换单个任务的显示/隐藏（通过类控制） #

实现思路： #

1. 获取todo数据后，给每个todo对象添加专属的isActive属性，用来控制自身的显示状态
2. 模板中把类绑定到当前todo的isActive属性上
3. 点击事件传递当前todo对象作为参数，方法中只切换这个todo的状态

修改后的代码： #

HTML部分：

<button id="btn" v-on:click='getTodo'>Show Todo</button>
<div id="jsonData" v-for='(todo, index) in todos' :key="todo.id">
    <ul :class='{active: todo.isActive}' v-on:click='toggleTask(todo)'>
        <li>{{todo.title}}</li>
        <li>Task Status : {{todo.completed}}</li>
    </ul>
</div>

JS部分：

var vm = new Vue({
    el: '#app',
    data() {
        return {
            todos: []
        }
    },
    methods: {
        getTodo: function() {
            axios.get('https://jsonplaceholder.typicode.com/todos')
            .then((response) => {
                // 给每个todo添加专属的isActive属性，初始为false（默认显示）
                this.todos = response.data.map(todo => ({
                    ...todo,
                    isActive: false
                }));
            })
        },
        toggleTask: function(todo) {
            // 仅切换当前点击的todo的状态
            todo.isActive = !todo.isActive;
        }
    }
})

注：记得在CSS里给.active类添加隐藏样式，比如display: none;或opacity: 0;

方案二：直接移除点击的任务 #

如果你的需求是点击后直接删除任务，而不是切换显示状态，可以用这个方案：

修改后的代码： #

HTML部分：

<button id="btn" v-on:click='getTodo'>Show Todo</button>
<div id="jsonData" v-for='(todo, index) in todos' :key="todo.id">
    <ul v-on:click='removeTask(index)'>
        <li>{{todo.title}}</li>
        <li>Task Status : {{todo.completed}}</li>
    </ul>
</div>

JS部分：

var vm = new Vue({
    el: '#app',
    data() {
        return {
            todos: []
        }
    },
    methods: {
        getTodo: function() {
            axios.get('https://jsonplaceholder.typicode.com/todos')
            .then((response) => {
                this.todos = response.data;
            })
        },
        removeTask: function(index) {
            // 从数组中移除对应索引的任务
            this.todos.splice(index, 1);
            // 也可以用filter方法实现：
            // this.todos = this.todos.filter((_, i) => i !== index);
        }
    }
})

额外小提示： #

• 使用v-for时一定要加上:key属性，推荐用todo的id，能让Vue更高效地更新DOM
• 如果选择方案一，也可以直接用v-show="!todo.isActive"或v-if="!todo.isActive"控制元素显示，不用依赖CSS类

内容的提问来源于stack exchange，提问作者alittlecurryhot