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

Question

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

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

Class绑定

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

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

然后在您的 <style> 块中，根据相应的紧急程度设置项目文本的样式 class:

.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;
}

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

Using a drop down menu in Vue to change color of text

drop-down-menu

vue.js

vuejs2

vue-cli

Class绑定

属性绑定