一、使用内联样式更改边框颜色
在vue组件中，我们可以使用内联样式（inline style）来动态更改元素的外观。下面是一个简单的例子：
<template> <div :style="{bordercolor: 'red'}">hello, vue!</div></template>
在这个例子中，我们使用了vue的绑定语法:style来绑定内联样式。我们将样式对象{bordercolor: 'red'}传递给:style，这将使元素的边框颜色变为红色。
但是要注意，使用内联样式有一个缺点，那就是代码不易维护。当我们需要更改样式时，需要修改vue组件的代码，而不是统一修改css文件。
二、使用类绑定更改边框颜色
为了解决使用内联样式的缺点，我们可以考虑使用类绑定（class binding）来更改元素的样式。类绑定允许我们根据组件状态动态地更改元素的类名，从而实现样式更改。
下面是一个使用类绑定的例子：
<template> <div :class="{'red-border': isredborder}">hello, vue!</div></template><script>export default { data () { return { isredborder: true } }}</script><style scoped>.red-border { border-color: red;}</style>
在这个例子中，我们定义了一个表示元素是否显示红色边框的状态变量isredborder。然后，使用vue的类绑定语法:class绑定了一个类名对象{'red-border': isredborder}。该类名对象的作用是，当isredborder为true时，将元素的类名设为'red-border'，从而触发该类的样式。
为了使该类样式生效，我们还需要在vue组件中定义该类的样式，如上面的代码所示，<style>标签内的.red-border样式定义了元素的红色边框样式。
三、使用计算属性更改边框颜色
类绑定虽然解决了内联样式的维护性问题，但它也存在一个限制：不能直接使用js表达式来控制样式的变化。这对于一些动态需求来说，比如根据用户选择来更改边框颜色，会比较麻烦。
这时，我们可以考虑使用计算属性（computed property）来实现更精细的样式变化。计算属性允许我们动态地计算属性值，这样就可以根据用户选择等条件来更改边框颜色。
下面是一个使用计算属性的例子：
<template> <div :style="{bordercolor: bordercolor}">hello, vue!</div></template><script>export default { data () { return { textcolor: 'black' } }, computed: { bordercolor () { if (this.textcolor === 'black') { return 'gray'; } else if (this.textcolor === 'red') { return 'red'; } else { return 'blue'; } } }}</script>
在这个例子中，我们定义了一个计算属性bordercolor。根据textcolor属性的值，我们可以动态地计算边框的颜色。当textcolor为black时，边框颜色为gray；当textcolor为red时，边框颜色为red；当textcolor为其他值时，边框颜色为blue。
使用计算属性可以实现更复杂的样式变化。但要注意，计算属性只能实现精细的样式变化，对于整体的样式控制，还是需要使用类绑定或内联样式。
四、总结
在vue中，我们可以使用多种方式来更改元素的边框颜色。使用内联样式可以实现最简单的样式控制，但维护性不好；使用类绑定可以实现动态控制，但无法直接使用js表达式；使用计算属性可以实现更复杂的样式变化，但对于整体的样式控制还需要其他方法。根据项目需求，我们可以灵活选择不同的方式来实现元素样式的控制。
以上就是vue更改边框颜色的详细内容。