Vue.js实现输入框激活或有内容时切换Font Awesome图标颜色的问题

嘿，这个问题我太懂了！纯CSS确实搞不定「输入框有内容但未获得焦点」的场景，不过你当前用Vue类绑定的思路完全正确，我给你整理几个更完善的实现方案：

1. 基础实现（优化你的现有代码） #

首先我们需要在组件里跟踪两个状态：输入框的内容，以及输入框是否获取焦点。

先在组件的data里定义这两个变量：

data() {
  return {
    inputValue: '',
    isInputFocused: false
  }
}

然后在模板里把输入框和图标关联起来：

<template>
  <div class="input-group">
    <!-- 绑定类名：有内容或聚焦时变黄，否则白色 -->
    <font-awesome-icon 
      :class="inputValue || isInputFocused ? 'text-yellow' : 'text-white'" 
      icon="search" 
    />
    <input
      v-model="inputValue"
      @focus="isInputFocused = true"
      @blur="isInputFocused = false"
      placeholder="请输入搜索内容..."
    />
  </div>
</template>

对应的CSS样式：

.text-white {
  color: #ffffff;
}
.text-yellow {
  color: #ffd700;
}

2. 更简洁的方式：用计算属性封装逻辑 #

如果觉得模板里的判断逻辑有点乱，可以把它抽到计算属性里，让模板更干净：

computed: {
  iconColorClass() {
    // 只要输入有内容，或者输入框聚焦，就返回黄色类名
    return this.inputValue || this.isInputFocused ? 'text-yellow' : 'text-white'
  }
}

然后模板里直接引用这个计算属性：

<font-awesome-icon :class="iconColorClass" icon="search" />

这样后期维护的时候，逻辑都集中在计算属性里，修改起来更方便。

为什么纯CSS方案行不通？ #

你之前尝试的纯CSS只能处理:focus的情况，因为CSS没有原生的方式直接检测输入框是否有内容。虽然有:placeholder-shown伪类可以间接判断（当占位符显示时，说明输入框为空），还可以结合:focus-within写这样的代码：

/* 输入框聚焦或有内容时，图标变黄 */
.input-group:focus-within svg,
.input-group:not(:has(input:placeholder-shown)) svg {
  color: #ffd700;
}
.input-group svg {
  color: #ffffff;
}

但这个方案有两个问题：一是:has()选择器的浏览器支持还不完美（比如旧版Firefox不支持）；二是如果你的输入框没有设置占位符，或者占位符为空，这个方法就彻底失效了。所以还是用Vue的响应式方案更靠谱，兼容性更好，逻辑也更清晰。

总结一下，你现在的思路完全没问题，只要把输入内容和焦点状态结合起来判断，就能完美覆盖所有需求场景啦！

内容的提问来源于stack exchange，提问作者Krystian Waśkowski