使用Vue中的下拉菜单更改文本的颜色

Question

我正在尝试根据从下拉菜单中选择的选项来更改文本的颜色。这是针对我正在从事的TODO List项目。下拉菜单具有三个选项：高紧急度（将文本更改为红色），中紧急度（将文本更改为黄色）和低紧急度（将文本更改为绿色）。

<template>
  <div class="TodoList">
    <input type="text" class="todo-input" v-model="newTodo" @keyup.enter="addTodo">
    <div v-for="(todo, index) in todos" :key="todo.id" class="todo-item"     
        </div>
        <ul class="urgency-column">
            <li>
                <label class="todo-label" >Select Urgency level:</label>
            </li>
            <li>
                <select class="todo-drop" id="" onchange="setUrgency()">
                    <option value="high">High Urgency</option>
                    <option value="medium">Medium Urgency</option>
                    <option value="low">Low Urgency</option>
                </select>
            </li>
        </ul>
    </div>
  </div>
</template>

<scripts>
export default {
  methods: {
    setUrgency(todo) {}
  }
}
</script>

Answer 1

首先，使用v-model捕获选定的紧急度。添加新的TODO项时，请确保模型包含urgency属性：

methods: {
  addItem() {
    this.todos.push({
      urgency: '',
      //...
    })
  }
}

<select class="todo-drop" v-model="todo.urgency">...</select>

类绑定

您可以根据项目的urgency值使用class binding设置特定的类：

<div class="item-text"
     :class="{ high: todo.urgency === 'high', medium: todo.urgency === 'medium', low: todo.urgency === 'low' }">
  {{todo.text}}
</div>

然后在您的<style>块中，根据相应的紧急级别设置项目文本的样式：

.item-text.high {
  color: red;
}
.item-text.medium {
  color: yellow;
}
.item-text.low {
  color: green;
}

属性绑定

或者您可以应用可以在CSS中选择的属性。例如，这会向TODO项目的文本容器中添加一个urgency属性，该属性的值等于所选的紧急度：

<div class="item-text" :urgency="todo.urgency">{{todo.text}}</div>

然后在您的<style>块中，使用attribute selector紧急设置项目文本的样式：

.item-text[urgency="high"] {
  color: red;
}
.item-text[urgency="medium"] {
  color: yellow;
}
.item-text[urgency="low"] {
  color: green;
}