选中文本的样式 - Vue.js

Question

我正在尝试创建一个“待办事项应用程序”，但遇到了一个小问题。我是 Vue.js 的初学者，我没有找到任何解决方案。我想为选中的文本应用一种样式，为未选中的文本应用另一种样式。我试图在 :style 前面添加索引，但没有用。这是我的清单，有一个循环。每次用户按下按钮时，新任务都会添加到列表中。

<ul class="list-group task-list">
  <app-image-slider></app-image-slider>
  <li class="list-group-item task-li" v-for="(task, index) in taskList" :key="index.taskList"> 
  <input type="checkbox" class="checkmark" v-model="toggle" true-value="yes" false-value="no"> 
    <span class="task-line" 
    :style="[toggle === 'no' ? {'text-decoration':'none'} : {'text-decoration':'line-through', 'color':'#718093'}]">
      {{task}} 
     </span>
     <button @click="removeTask(index)" class="remove-button">❌</button>
   </li>
</ul>

屁股你可以看到，我有 :style 的那一行。这是有效的，但样式适用于所有任务。我想要一些样式用于选中的文本，另一种用于未选中的文本。

和脚本标签。

export default {
    data() {
        return {
            newTask: "",
            taskList: [ ],
            addTaskText: "Add some task to do!",
            textLength: 0,
            toggle: "no"
        }
    },
    methods: {
        countLetters() {
            this.textLength = this.newTask.length;
        },
        addNewTask() {
            let spaceRemove = this.newTask.replace(/\s/g, "");
            let newTaskWithoutSpace = spaceRemove;

            if (newTaskWithoutSpace.length >= 7) {
                this.taskList.push(this.newTask);
                this.newTask = "";
                this.textLength = 0;
            }
        },
        removeTask(index) {
            this.taskList.splice(index, 1);
        },
    },
    components: {
        appImageSlider: ImageSlider
    }
}

Answer 1

每个任务都需要 toggle。您现在使用切换的方式将适用于所有任务。

因此，不要为 taskList 使用字符串数组，而是将其设为对象数组，其中每个任务类似于：

{
  toggle: "no",
  description: "Clean room."
}

所以你最终会得到符合以下内容的 for 循环：

<li class="list-group-item task-li" v-for="(task, index) in taskList" :key="index"> 
    <input type="checkbox" class="checkmark" v-model="task.toggle" true-value="yes" false-value="no"> 
    <span class="task-line" 
    :style="[task.toggle === 'no' ? {'text-decoration':'none'} : {'text-decoration':'line-through', 'color':'#718093'}]">
      {{task.description}} 
     </span>
     <button @click="removeTask(index)" class="remove-button">❌</button>
</li>

选中文本的样式 - Vue.js

Style on checked text - Vue.js

javascript

vue.js

vuejs2

vuejs3