如何用Vue更优雅地实现输入元素:focus伪类的编程式样式设置？

当然有更优雅的Vue风格实现方式啦！你现在用原生事件监听器操作DOM样式的思路虽然可行，但完全可以利用Vue的响应式特性或者内置能力来简化代码，更符合Vue的开发习惯。下面给你几种常用的方案：

1. 响应式类绑定（最推荐的常规场景） #

利用Vue的v-bind:class（可简写为:class）结合@focus、@blur事件，把焦点状态交给Vue的响应式数据管理，样式完全通过CSS类来控制，做到逻辑与样式分离：

<template>
  <input 
    id="myElementID"
    :class="{ 'input-focused': isInputFocused }"
    @focus="isInputFocused = true"
    @blur="isInputFocused = false"
  />
</template>

<script>
export default {
  data() {
    return {
      isInputFocused: false
    }
  }
}
</script>

<style scoped>
.input-focused {
  border-color: red;
  /* 还可以添加其他焦点样式，比如outline、box-shadow等 */
}
</style>

这种方式的好处是状态完全由Vue追踪，你还能在其他逻辑里复用isInputFocused这个状态（比如根据焦点状态显示提示文字），比直接操作DOM.style更灵活。

2. 自定义指令（适合多元素复用场景） #

如果你的项目里多个输入框都需要这个焦点样式，写一个自定义指令会更高效，避免重复代码：

<template>
  <!-- 直接在需要的元素上使用指令即可 -->
  <input id="myElementID" v-focus-border="red" />
  <input id="anotherElement" v-focus-border="#2563eb" />
</template>

<script>
export default {
  directives: {
    focusBorder: {
      // 指令绑定到元素时触发
      mounted(el, binding) {
        // 获取指令传递的颜色参数，默认值可以设为red
        const focusColor = binding.value || 'red';
        
        // 定义复用的事件处理函数
        const handleFocus = () => {
          el.style.borderColor = focusColor;
        };
        const handleBlur = () => {
          el.style.borderColor = '';
        };
        
        el.addEventListener('focus', handleFocus);
        el.addEventListener('blur', handleBlur);
        
        // 把处理函数存到元素上，方便移除监听器
        el._focusHandlers = { handleFocus, handleBlur };
      },
      // 元素销毁时移除监听器，防止内存泄漏
      unmounted(el) {
        const { handleFocus, handleBlur } = el._focusHandlers;
        el.removeEventListener('focus', handleFocus);
        el.removeEventListener('blur', handleBlur);
      }
    }
  }
}
</script>

这个指令还支持传递自定义颜色参数，复用性拉满，而且记得在组件卸载时移除事件监听器，避免内存泄漏。

3. 直接用CSS伪类（最简单的纯样式场景） #

如果你的需求只是单纯修改焦点时的样式，没有额外的JS逻辑要配合，那直接用CSS的:focus伪类是最简洁的方案，完全不需要写JS：

<template>
  <input id="myElementID" class="custom-input" />
</template>

<style scoped>
.custom-input:focus {
  border-color: red;
  /* 可选：覆盖浏览器默认的outline样式 */
  outline: none;
}
</style>

这是浏览器原生支持的特性，性能最好，代码也最少，优先推荐这种方案，除非你有必须用JS介入的特殊需求。

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