vue js纯文字字符串增加span标签

你可以使用 Vue.js 的插值语法和 v-html 指令来实现纯文字字符串增加 span 标签的效果。下面是一个示例：

<template>
  <div>
    <p v-html="formattedText"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '这是一段纯文字字符串',
    };
  },
  computed: {
    formattedText() {
      return this.text.replace(/(\S+)/g, '<span>$1</span>');
    },
  },
};
</script>

在上面的示例中，我们使用 computed 属性来创建一个 formattedText 的计算属性，它将纯文字字符串中的每个单词都用 span 标签包裹起来。然后，我们使用 v-html 指令将 formattedText 渲染到页面中，这样就可以显示带有 span 标签的纯文字字符串了。

注意：使用 v-html 指令需要谨慎，因为它会直接将 HTML 字符串插入到页面中，可能会导致 XSS 攻击。请确保你信任的内容才使用 v-html 指令。