vue3 中input标签获取焦点后，改变其它样式都有效，唯独边框无效

在 Vue3 中，当你给 `input` 标签设置样式并试图通过聚焦事件使其发生改变时，有时候可能会遇到边框样式无法更新的问题。这通常是因为浏览器的默认 CSS 或者内联样式优先级高于你自定义的样式，特别是在处理某些特定属性，如边框样式。

有几个可能的原因：

1. **浏览器默认样式**：浏览器为了保证交互的统一性，对于表单元素（如 input），有一些默认样式可能不会被覆盖，特别是边框样式。你可以尝试使用 `!important` 来提升你的样式优先级。

<input ref="inputField" @focus="focusHandler" style="border: 2px solid red !important; /* 添加 !important */"/>

2. **CSS权重问题**：检查是否有其他样式声明拥有更高的权重，比如全局的 CSS 或父元素的样式。可以使用 `style scoped` 或 `vue-style-loader` 来限制样式的范围，避免这种情况。

3. **Vue 的 CSS 冲突**：确认没有使用 `.vue` 文件内部直接修改 `input` 类的选择器，而是应该使用 `ref` 和 `v-bind:class` 来动态应用样式。

<div>
  <input ref="inputField" v-bind:class="{ focused: isFocused }">
  <style>
    .focused {
      border-color: red;
    }
  </style>
</div>
<script>
export default {
  data() {
    return {
      isFocused: false,
    };
  },
  methods: {
    focusHandler() {
      this.isFocused = true;
    },
  },
};
</script>

4. **JavaScript 动态添加样式**：如果边框样式是在 JavaScript 里动态设置的，请确认你已将样式添加到 DOM 中，并且 `focusHandler` 函数正确地触发了。