能否在Vue中像如下代码一样输出、渲染并绑定HTML字符串？

当然可以实现你想要的功能，但首先要注意：直接用jQuery操作DOM（比如$('#example').html()）和Vue的响应式理念冲突，而且你例子里插入的<router-link>或者带v-on:click的标签是不会被Vue编译的——Vue只会在初始化阶段编译模板，后续手动插入的HTML字符串不会被处理，指令和组件都无法生效。

下面是几种Vue原生的正确实现方式：

1. 渲染纯静态HTML字符串 #

如果只是渲染不带Vue指令/组件的静态HTML，可以用Vue的v-html指令，不过要注意防范XSS风险：

<template>
  <div id="example" v-html="staticHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      staticHtml: ''
    }
  },
  methods: {
    // 比如替换你原来的funcB（纯静态场景）
    funcB() {
      this.staticHtml = '<p>这是静态HTML内容</p>'
    }
  }
}
</script>

⚠️ 注意：v-html无法解析Vue指令（如v-on）或Vue组件（如router-link）。

2. 渲染Vue组件（如router-link） #

如果要动态渲染router-link这类Vue组件，不要用HTML字符串，直接用Vue的组件系统实现：

方式一：条件渲染 #

通过控制数据来显示/隐藏组件：

<template>
  <div id="example">
    <router-link v-if="showRouterLink" to="/some/path">跳转至目标页面</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showRouterLink: false
    }
  },
  methods: {
    funcB() {
      // 触发后显示router-link
      this.showRouterLink = true
    }
  }
}
</script>

方式二：动态组件 #

如果需要动态切换不同组件，可以用<component>标签：

<template>
  <div id="example">
    <component :is="currentComponent" :to="targetPath">跳转链接</component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: '',
      targetPath: ''
    }
  },
  methods: {
    funcB() {
      this.currentComponent = 'router-link'
      this.targetPath = '/some/path'
    }
  }
}
</script>

3. 动态生成带事件绑定的元素 #

对于你例子中funcC需要实现的“点击触发funcA”场景，推荐用Vue的响应式方式实现，避免手动操作DOM：

方式一：条件渲染按钮 #

<template>
  <div id="example">
    <a v-if="showBtn" href="" @click.prevent="funcA">点击触发funcA</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showBtn: false
    }
  },
  methods: {
    funcA() {
      console.log('funcA被触发了！')
    },
    funcC() {
      this.showBtn = true
    }
  }
}
</script>

这里的@click.prevent是Vue的事件修饰符，用来阻止默认跳转行为，等价于e.preventDefault()。

方式二：动态创建VNode（特殊场景） #

如果确实需要手动创建元素（不推荐，尽量用响应式），可以用Vue的$createElement创建虚拟节点并挂载：

<script>
export default {
  methods: {
    funcA() {
      console.log('funcA被触发了！')
    },
    funcC() {
      // 创建虚拟节点
      const vnode = this.$createElement('a', {
        attrs: { href: '' },
        on: {
          click: (e) => {
            e.preventDefault()
            this.funcA()
          }
        }
      }, '点击触发funcA')
      
      // 挂载到目标元素
      const targetEl = document.getElementById('example')
      this.$mount(vnode, targetEl)
    }
  }
}
</script>

总结 #

Vue的核心是数据驱动视图，尽量避免直接操作DOM（比如jQuery的html()方法）。通过修改数据让Vue自动更新视图，才能充分利用Vue的响应式、组件化特性，同时避免出现指令/组件不生效的问题。

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