vue盒子点击添加边框

你可以使用Vue的绑定语法 `:class` 和 `@click`，来实现点击盒子添加边框的效果。具体方法如下：

1. 在Vue组件的data中定义一个变量`isActive`，用于记录当前盒子是否被点击，初始值为false。

data() {
  return {
    isActive: false
  }
}

2. 在Vue组件的模板中，使用`div`元素作为盒子，并绑定`class`属性，根据`isActive`变量的值来添加或移除边框样式。同时，给`div`元素绑定`@click`事件，当点击盒子时，执行`toggleActive()`方法，切换`isActive`变量的值，从而添加或移除边框。

<template>
  <div class="box" :class="{ active: isActive }" @click="toggleActive"></div>
</template>

3. 在Vue组件的样式中，定义`active`类名的样式，用于给盒子添加边框。

<style scoped>
.box {
  width: 500px;
  height: 300px;
  cursor: pointer;
  transition: border 0.5s ease-in-out;
}

.active {
  border: 2px solid red;
}
</style>

4. 在Vue组件的方法中，定义`toggleActive()`方法，用于切换`isActive`变量的值，从而添加或移除边框。

methods: {
  toggleActive() {
    this.isActive = !this.isActive;
  }
}

完整的Vue组件代码如下所示：

<template>
  <div class="box" :class="{ active: isActive }" @click="toggleActive"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
}
</script>

<style scoped>
.box {
  width: 500px;
  height: 300px;
  cursor: pointer;
  transition: border 0.5s ease-in-out;
}

.active {
  border: 2px solid red;
}
</style>