vue动态绑定border样式

在Vue中，你可以使用动态绑定来设置border样式。你可以通过使用一个计算属性或直接在模板中使用一个JavaScript表达式来实现。

方法一：使用计算属性

首先，在你的Vue组件中定义一个计算属性，该属性根据需要返回一个对象，其中包含要应用于border的样式属性。然后，你可以通过使用v-bind指令将计算属性与元素的style属性进行绑定。

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

<script>
export default {
  data() {
    return {
      borderWidth: '1px',
      borderColor: 'red',
      borderStyle: ''
    }
  },
  computed: {
    borderStyle() {
      return {
        border: `${this.borderWidth} solid ${this.borderColor}`
      }
    }
  }
}
</script>

这里，计算属性`borderStyle`根据`borderWidth`和`borderColor`的值返回一个包含border样式的对象。然后，该计算属性被绑定到`div`元素的style属性上。

方法二：直接在模板中使用JavaScript表达式

除了使用计算属性，你还可以直接在模板中使用JavaScript表达式来动态绑定border样式。

<template>
  <div :style="{ border: borderWidth + ' solid ' + borderColor }"></div>
</template>

<script>
export default {
  data() {
    return {
      borderWidth: '1px',
      borderColor: 'red'
    }
  }
}
</script>

在这个例子中，我们使用了一个JavaScript表达式，将`borderWidth`和`borderColor`的值组合成一个对象，并将其绑定到`div`元素的style属性上。