Vue实现为文本添加边框

在Vue.js中，你可以通过CSS样式或者HTML模板属性来为文本添加边框。以下是两种常见的方式：

**1. 使用CSS（推荐）**
在`.vue`文件中的`<style>`标签内编写CSS规则，例如：

<style>
    .bordered-text {
        border: 1px solid black; /* 可自定义边框样式 */
        padding: 2px; /* 防止文字直接接触边框 */
    }
</style>

<p v-bind:class="{ bordered-text: shouldBorder }">这是带边框的文本</p>

然后在JavaScript里设置`shouldBorder`变量，控制是否应用边框样式：

data() {
  return {
    shouldBorder: true, // 当需要时设置为true
  };
}

**2. 直接在HTML模板中使用v-bind属性**

<p :style="{ 'border': shouldBorder ? '1px solid black' : 'none', 'padding': '2px' }">这是带边框的文本</p>

同样地，在JavaScript中控制`shouldBorder`。