vue3中js改变边框颜色

在Vue3中，可以通过绑定class的方式来改变边框颜色。

首先，在Vue组件中定义一个data属性来存储当前边框颜色的值：

data() {
  return {
    borderColor: 'red'
  }
}

然后，在模板中使用`v-bind`指令绑定class，根据`borderColor`的值来决定边框颜色：

<div class="my-element" :class="{ 'border-red': borderColor === 'red', 'border-blue': borderColor === 'blue' }"></div>

这里使用了对象语法来绑定class，`border-red`和`border-blue`是自定义的类名，可以在CSS中定义它们的样式。`borderColor === 'red'`和`borderColor === 'blue'`是条件表达式，根据`borderColor`的值来决定是否添加相应的类名。例如，如果`borderColor`的值是`red`，则`'border-red'`类名会被添加到`my-element`元素上。

最后，在Vue组件中定义一个方法来改变`borderColor`的值：

methods: {
  changeBorderColor(color) {
    this.borderColor = color
  }
}

在模板中，可以通过调用`changeBorderColor`方法来改变边框颜色：

<button @click="changeBorderColor('red')">Red</button>
<button @click="changeBorderColor('blue')">Blue</button>

这里使用`@click`指令绑定点击事件，当用户点击按钮时，会调用`changeBorderColor`方法并传递相应的颜色值。`this.borderColor = color`会将`borderColor`的值改为传递的颜色值，从而改变边框颜色。