嘿，我完全明白你现在遇到的问题了——当你用v-html渲染包含Vue插值语法（比如{{text}}）的字符串时，Vue根本不会解析这些插值表达式。原因很简单：v-html的作用只是把字符串当作原生HTML插入到DOM里，并不会对里面的内容进行Vue模板编译，所以你写的{{text}}只会被当成普通文本显示出来。

针对你需要展示多个带不同HTML结构和动态值的div的场景，这里有几个可行的解决方案：

方案1：用Vue组件替代纯HTML字符串（最推荐） #

这才是符合Vue组件化思想的正确做法，不仅能完美实现数据绑定，还方便后续维护和扩展。

比如你可以先写一个通用的自定义组件，把需要的HTML结构封装进去，通过props传递动态值：

<template>
  <div class="custom-item">
    <!-- 这里可以根据需求定义任意HTML结构 -->
    <h1>{{ title }}</h1>
    <p v-if="showDesc">{{ description }}</p>
    <div v-html="extraHtml"></div> <!-- 如果需要部分动态HTML，也可以在这里用v-html -->
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    showDesc: {
      type: Boolean,
      default: false
    },
    description: {
      type: String,
      default: ''
    },
    extraHtml: {
      type: String,
      default: ''
    }
  }
}
</script>

然后在父组件里循环渲染这个组件，把每个div需要的数据传进去：

<template>
  <div id="app">
    <custom-item
      v-for="(item, index) in itemList"
      :key="index"
      :title="item.title"
      :show-desc="item.hasDesc"
      :description="item.desc"
      :extra-html="item.extra"
    />
  </div>
</template>

<script>
import CustomItem from './CustomItem.vue'

export default {
  components: { CustomItem },
  data() {
    return {
      itemList: [
        { title: 'Hello world', hasDesc: false },
        { title: 'Hello Vue', hasDesc: true, desc: '这是一个响应式前端框架', extra: '<span style="color: blue;">Vue 3.x</span>' }
      ]
    }
  }
}
</script>

这个方案的优势在于完全利用Vue的响应式系统，而且避免了v-html可能带来的XSS安全风险（如果HTML内容来自用户输入的话）。

方案2：手动替换HTML字符串中的变量 #

如果后端返回的是固定格式的HTML字符串，里面有明确的占位符（比如{{text}}），那你可以在拿到数据后手动替换这些占位符，再传给v-html。

比如：

<div id="app" v-html="processedHtml"></div>

new Vue({
  el: '#app',
  data: {
    text: 'world',
    rawHtml: '<h1>Hello {{text}}</h1><p>这是关于{{text}}的示例</p>'
  },
  computed: {
    processedHtml() {
      // 全局替换所有的{{text}}为data里的text值
      return this.rawHtml.replace(/{{text}}/g, this.text)
    }
  }
})

如果有多个变量，可以写一个通用的替换函数：

// 假设data里有一个variables对象存所有变量
data() {
  return {
    variables: {
      text: 'world',
      author: 'Sindhu'
    },
    rawHtml: '<h1>Hello {{text}}</h1><p>作者：{{author}}</p>'
  }
},
computed: {
  processedHtml() {
    let resultHtml = this.rawHtml
    // 遍历所有变量，替换对应的占位符
    Object.keys(this.variables).forEach(key => {
      const regex = new RegExp(`{{${key}}}`, 'g')
      resultHtml = resultHtml.replace(regex, this.variables[key])
    })
    return resultHtml
  }
}

这个方案适合后端返回的HTML结构比较固定、变量不多的场景，但要注意安全问题——如果HTML内容包含用户输入的内容，一定要做好XSS过滤。

方案3：使用Vue渲染函数（适合复杂动态场景） #

如果你的需求非常灵活，需要根据数据动态生成不同的DOM结构，可以用Vue的渲染函数（Render Function）来直接生成VNode，完全控制渲染过程。

比如：

new Vue({
  el: '#app',
  data: {
    text: 'world'
  },
  render(h) {
    // h是createElement的别名，用来创建虚拟DOM节点
    return h('div', [
      h('h1', `Hello ${this.text}`),
      // 可以根据条件动态添加元素
      this.text === 'world' ? h('p', '欢迎来到Vue的世界') : h('p', '这是其他内容')
    ])
  }
})

这个方案的学习成本稍高，但能实现最复杂的动态渲染需求。

为什么你之前的方法无效？ #

• v-text：会把内容当成纯文本输出，不会解析任何HTML标签；
• {{...}}插值：Vue会自动转义HTML内容，把标签当成纯文本显示；
• {{{...}}}：这是Vue 1.x的语法，Vue 2+已经废弃，现在用v-html替代，但v-html不处理Vue模板语法，只渲染原生HTML。

内容的提问来源于stack exchange，提问作者Sindhu G