vue input失去焦点把外层边框去掉

可以使用Vue的v-on指令和v-bind指令来实现这个功能。

首先，在input标签上添加一个v-on:blur事件监听器，当输入框失去焦点时触发该事件：

<input v-on:blur="removeBorder" />

然后，在Vue实例中定义一个removeBorder方法，该方法在事件触发时会把外层边框去掉：

new Vue({
  el: '#app',
  methods: {
    removeBorder: function() {
      // 获取外层元素并移除边框类
      var outer = document.getElementById('outer');
      outer.classList.remove('border');
    }
  }
})

最后，在外层元素上添加一个id属性为"outer"，并在CSS中定义一个边框类，如下所示：

#outer.border {
  border: none;
}

这样，当输入框失去焦点时，外层元素会移除边框类，从而实现去掉边框的效果。

相关问题

VUE input失去焦点事件

在 Vue 中，可以使用 `v-on:blur` 或简写 `@blur` 指令来监听输入框失去焦点事件。例如：

<template>
  <div>
    <input type="text" v-model="message" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleBlur() {
      console.log('输入框失去焦点了')
    }
  }
}
</script>

当输入框失去焦点时，`handleBlur` 方法会被调用。你可以在该方法中执行需要的操作。

vue input点击给外层div加边框

可以通过绑定样式的方式来实现，具体步骤如下：

1. 给外层 div 添加一个类名，比如 `wrapper`。

2. 给 input 绑定一个 `@focus` 事件，在事件处理函数中使用 `$refs` 获取到外层 div 的 DOM 元素，然后使用 `classList` 添加一个样式类名，比如 `focus`。

3. 在样式表中，定义 `wrapper` 类的样式，包括默认样式和 focus 样式，比如：

.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper.focus {
  border-color: blue;
}

这样，当 input 获得焦点时，就会给外层 div 添加一个蓝色边框。完整代码如下：

<template>
  <div class="wrapper" ref="wrapper">
    <input type="text" @focus="handleFocus">
  </div>
</template>

<script>
export default {
  methods: {
    handleFocus() {
      this.$refs.wrapper.classList.add('focus');
    }
  }
};
</script>

<style>
.wrapper {
  border: 1px solid #ccc;
  padding: 10px;
}

.wrapper.focus {
  border-color: blue;
}
</style>