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>