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

【问题标题】：Using a drop down menu in Vue to change color of text在 Vue 中使用下拉菜单更改文本颜色
【发布时间】：2019-09-24 17:41:10
【问题描述】：

我正在尝试根据从下拉菜单中选择的选项来更改文本的颜色。这是我正在处理的 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>

【问题讨论】：

标签： vue.js drop-down-menu vuejs2 vue-cli

【解决方案1】：

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

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

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

类绑定

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

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

【讨论】：