慕丝7291255
问题是你写的是被评估false为的字符串，你应该知道空字符串、值和被评估为，反之亦然"false"true''0nullundefinedfalse在此处了解有关类型强制的更多信息let app = new Vue({ el: "#app", data() { return { newTodo: "", type: "", important: "", id: 3, todo: [{ id: 1, title: "Fist Task", completed: false, editing: "false", type: "urgent", }, { id: 2, title: "Second Task", completed: false, editing: "false", type: "important", }, ], }; }, methods: { addTask() { if (this.newTodo.trim().length == 0) { return; } this.todo.push({ id: this.id, title: this.newTodo, completed: "false", editing: "false", type: this.type, }); this.id++; this.newTodo = ""; }, removeTask(index) { this.todo.splice(index, 1); }, completeTask(task) { task.completed = event.target.checked; }, }, directives: { focus: { inserted: function(el) { el.focus(); }, }, },})* { margin: 0px; box-sizing: border-box;}.removeTask {}.completed { text-decoration: line-through;}.task { text-decoration: 0;}/*.conteiner { display: flex;} /*.todoBox { width: 50%; height: 50vh; border: 1px solid black; text-align: center;}.todoList { width: 100%; height: 100%; border: 1px solid red;}*/<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app"> <div class="conteiner"> <input placeholder="what we do ?" type="text" v-model="newTodo" /> <button @click="addTask()">Add</button> <select v-model="type"> <option disabled value="">Select</option> <option value="urgent">Urgent</option> <option value="noturgent">Not Urgent</option> <option value="important">Important</option> <option value="notimportant">Not Important</option> </select> <div class="todoBox"> <h2>Urgent</h2> <div class="todoList" v-for="(task, index) in todo"> <div> <div v-if="task.type == 'urgent'"> <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" /> <div class="task" v-bind:class="{ completed: task.completed }"> {{ task.title }} </div> <button class="removeTask" @click="removeTask(index)">X</button> </div> </div> </div> </div> <div class="todoBox"> <h2>Not Urgent</h2> <div class="todoList" v-for="(task, index) in todo" :key="task.id"> <div> <div v-if="task.type == 'noturgent'"> <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" /> <div class="task" v-bind:class="{ completed: task.completed }"> {{ task.title }} </div> <button class="removeTask" @click="removeTask(index)">X</button> </div> </div> </div> </div> <div class="todoBox"> <h2>Important</h2> <div class="todoList" v-for="(task, index) in todo" :key="task.id"> <div> <div v-if="task.type == 'important'"> <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" /> <div class="task" v-bind:class="{ completed: task.completed }"> {{ task.title }} </div> <button class="removeTask" @click="removeTask(index)">X</button> </div> </div> </div> </div> <div class="todoBox"> <h2>Not Important</h2> <div class="todoList" v-for="(task, index) in todo" :key="task.id"> <div> <div v-if="task.type == 'notimportant'"> <input v-model="task.completed" type="checkbox" name="" id="" @change="completeTask(task)" /> <div class="task" v-bind:class="{ completed: task.completed }"> {{ task.title }} </div> <button class="removeTask" @click="removeTask(index)">X</button> </div> </div> </div> </div> </div></div>