Vue.js中选中select特定选项时如何修改下拉框文字为红色

核心原理：原生select组件选中后的展示文本样式由select标签本身控制，无法直接继承内部option的样式，只需要监听选中值的变化，动态给select绑定对应样式类即可，同时可以保证目标选项的value始终为null。

具体实现代码 #

模板部分 #

注意目标选项必须用绑定属性的方式赋值null，不要直接写value="null"（这种写法拿到的是字符串类型的"null"，不是真正的null值）

<template>
  <select 
    v-model="selectedValue" 
    :class="{ 'text-red': selectedValue === null }"
  >
    <!-- 目标选项，value恒为null，保留原有的uk-text-danger类控制下拉列表内的样式 -->
    <option :value="null" class="uk-text-danger">.:: test ::.</option>
    <!-- 其他普通选项示例 -->
    <option value="opt1">普通选项1</option>
    <option value="opt2">普通选项2</option>
  </select>
</template>

逻辑部分 #

如果用组合式API（Vue3 setup语法）：

<script setup>
import { ref } from 'vue'
// 如果默认就选中那个null的提示项，初始值设为null即可
const selectedValue = ref(null)
</script>

如果用选项式API（Vue2/Vue3选项式写法）：

<script>
export default {
  data() {
    return {
      selectedValue: null
    }
  }
}
</script>

样式部分 #

<style scoped>
.text-red {
  color: red;
}
</style>

注意事项 #

• option标签上的uk-text-danger类只会在下拉展开的选项列表里生效，控制列表里该选项的文字颜色，选中后select输入框里的文字颜色由我们绑定在select上的text-red类控制。
• 不要直接给select写死红色样式，只有当选中值严格等于null的时候才加上红色类，选中其他普通选项时样式会自动恢复默认。

内容的提问来源于stack exchange，提问作者feng0