Vue中data内使用HTML元素报错，如何实现文本加粗/链接？

为什么直接写HTML标签会报错？ #

你当前的写法是把HTML标签作为字符串赋值给desc，但Vue默认不会自动解析字符串中的HTML，直接这么写只会把标签当普通文本输出。而报错提示要JSX/TS，是因为如果想直接写JSX元素（比如<b>exDesc</b>），需要项目提前配置JSX语法支持，你的项目没做相关配置，所以行不通。

可行的实现方案 #

方案1：使用v-html指令（最直接） #

把desc字段存成包含HTML标签的字符串，然后在模板里用v-html渲染，Vue会自动解析其中的HTML：

<!-- 模板部分 -->
<div v-html="item.desc"></div>

<!-- data部分 -->
data() {
  return {
    list: [
      {name:"ex", title:"exTitle", desc:"exDesc exDesc ....."},
      {name:"ex2", title:"ex2Title", desc:"<p> <b>exDesc</b> exDesc..... </p>"}
    ]
  }
}

注意：v-html会直接插入HTML，要确保内容是安全的（避免XSS攻击），如果内容来自用户输入，一定要做过滤处理。

方案2：用JSX渲染（需项目支持） #

如果项目配置了JSX支持（比如Vue2安装@vue/babel-preset-jsx，Vue3原生支持），可以把desc改成JSX元素：

// data部分
data() {
  return {
    list: [
      {name:"ex", title:"exTitle", desc:"exDesc exDesc ....."},
      {name:"ex2", title:"ex2Title", desc: (<p><b>exDesc</b> exDesc..... </p>)}
    ]
  }
}

// Vue3模板示例：
<div>{{ item.desc }}</div>

方案3：Markdown语法转HTML #

如果不想写原始HTML，可以用Markdown语法描述格式，然后用第三方库（比如marked、markdown-it）转成HTML，再用v-html渲染：

1. 安装依赖：

npm install marked

2. 使用示例：

<template>
  <div v-html="renderMarkdown(item.desc)"></div>
</template>

<script>
import marked from 'marked'

export default {
  data() {
    return {
      list: [
        {name:"ex", title:"exTitle", desc:"exDesc exDesc ....."},
        {name:"ex2", title:"ex2Title", desc:"**exDesc** exDesc....."} // Markdown加粗语法
      ]
    }
  },
  methods: {
    renderMarkdown(text) {
      return marked.parse(text)
    }
  }
}
</script>

方案4：拆分内容结构（更安全可控） #

如果不需要复杂的HTML，可以把desc拆成结构化数据，在模板里拼接渲染：

<template>
  <div>
    <span v-if="item.boldText" class="bold-text">{{ item.boldText }}</span>
    <span>{{ item.normalText }}</span>
    <a v-if="item.link" :href="item.link.url">{{ item.link.text }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {name:"ex", title:"exTitle", desc:"exDesc exDesc ....."},
        {name:"ex2", title:"ex2Title", boldText:"exDesc", normalText:" exDesc.....", link: null}
      ]
    }
  }
}
</script>

<style>
.bold-text {
  font-weight: bold;
}
</style>

内容的提问来源于stack exchange，提问作者Abdullah Semih Gür