vue中input框消除边框

在Vue.js中，如果你想消除`<input>`元素的边框，可以利用CSS样式来控制。通常我们会给输入框的`border`属性设置为`none`。假设你在HTML里有一个简单的输入框：

<input type="text" v-model="username">

对应的Vue实例中可能会有如下的CSS覆盖：

// 简单的CSS
<style>
  .custom-input {
    border: none; /* 消除边框 */
    outline: none; /* 移除光标时的轮廓线 */
    border-radius: 0; /* 如果需要的话，移除圆角 */
    padding: 0; /* 可选，移除内边距 */
    box-shadow: none; /* 可选，移除阴影效果 */
  }
</style>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
};
</script>

然后在模板上应用这个自定义样式：

<div class="custom-input">
  <input type="text" v-model="username" />
</div>

如果你只想在某种状态（比如聚焦时）改变边框，可以在`:focus`伪类下添加边框样式。