Vue.js中如何通过函数在模板内渲染带自定义属性的HTML元素？

可以实现，但你当前的写法有两个关键问题：

1. 用{{ }}插值表达式会把返回的HTML转义成纯文本，不会渲染成实际的DOM元素
2. 返回内容里的@click是Vue指令，这种动态生成的HTML不会被Vue编译，所以点击事件根本不会生效

正确的实现方式分两种场景： #

场景1：必须用函数返回HTML内容（不推荐，有XSS风险）

要用v-html指令替代插值表达式，同时事件绑定要改用原生JS的onclick，因为Vue不会编译v-html里的指令：

<template>
  <div class="test" v-html="testFunction(param1, param2, param3)"></div>
</template>

<script>
export default {
  methods: {
    testFunction(param1, param2, param3) {
      // 根据参数动态生成HTML，事件用原生onclick
      return `<button onclick="window.handleButtonClick()">Click</button>`;
    },
    handleButtonClick() {
      // 实际点击逻辑
      console.log('按钮被点击了');
    }
  },
  mounted() {
    // 将Vue方法挂载到window，供原生事件调用
    window.handleButtonClick = this.handleButtonClick;
  },
  beforeUnmount() {
    // 组件销毁时移除全局方法，避免内存泄漏
    delete window.handleButtonClick;
  }
};
</script>

⚠️ 注意：v-html会直接渲染原始HTML，绝对不能用于渲染用户输入的内容，否则会有XSS攻击风险。

场景2：Vue化的推荐写法（优先选择）

尽量避免用函数返回HTML，直接在template里用Vue的模板语法动态渲染元素，这样事件绑定、响应式都能正常工作：

<template>
  <div class="test">
    <!-- 根据参数动态控制元素显示/属性 -->
    <button 
      @click="handleButtonClick"
      :disabled="!param1"
      v-if="param2 && param3"
    >
      Click
    </button>
  </div>
</template>

<script>
export default {
  props: ['param1', 'param2', 'param3'],
  methods: {
    handleButtonClick() {
      console.log('按钮被点击了');
    }
  }
};
</script>

这种写法更符合Vue的响应式设计，代码可读性和可维护性都更高，也不存在XSS风险。

内容的提问来源于stack exchange，提问作者Dave Hester