vue中如何写出边框代码

在Vue中，如果你想给元素添加边框，你可以直接在CSS样式中设置。以下是一个基本的例子：

<div class="my-element" style="border: 1px solid #000;">这是一个有边框的div</div>

在这个例子中，`.my-element` 是选择器，用于选中HTML中的这个元素。`style` 属性用于直接在JavaScript中动态地应用CSS样式。`border` 属性是一个复合属性，可以分别设置边框宽度、样式和颜色，这里设置了1像素实线黑色边框。

如果你希望将这个样式放在单独的CSS文件中并通过Vue组件的`scoped`属性来限制作用域，那么可以在`.vue`文件里这么写：

<template>
  <div :style="{ borderColor: 'black', borderWidth: '1px', borderStyle: 'solid' }">内容</div>
</template>

<style scoped>
.my-border {
  border-width: 1px;
  border-style: solid;
}
</style>

在模板中，`:style`绑定一个对象到元素的`style`属性，这里动态定义了边框样式。`.my-border`是CSS类名，可以进一步在`.vue`文件的样式部分定义具体的值。