vue使用：style动态设置边框宽度

你可以使用 Vue 中的绑定语法和计算属性来动态设置元素的边框宽度。下面是一个示例：

首先，在你的 Vue 组件中，定义一个数据属性，用于存储边框宽度的值。例如：

<template>
  <div :style="borderStyle"></div>
</template>

<script>
export default {
  data() {
    return {
      borderWidth: '2px' // 初始边框宽度为2像素
    }
  },
  computed: {
    borderStyle() {
      return {
        borderWidth: this.borderWidth
      }
    }
  }
}
</script>

在这个示例中，我们使用了`borderWidth`数据属性来存储边框宽度的值，并且在`borderStyle`计算属性中返回一个对象，将`borderWidth`作为`borderWidth`属性的值。

然后，在模板中，使用`:style`指令将计算属性应用于元素的样式。这样，当`borderWidth`的值发生变化时，样式也会相应地更新。

你可以在需要的时候，通过改变`borderWidth`数据属性的值来动态设置边框宽度。例如，可以在按钮点击事件中修改`borderWidth`的值：

<button @click="changeBorderWidth">点击修改边框宽度</button>

methods: {
  changeBorderWidth() {
    this.borderWidth = '4px'; // 修改边框宽度为4像素
  }
}

这样，点击按钮后，边框宽度会动态地改变为4像素。你可以根据自己的需求，使用其他方式来触发边框宽度的变化。