Vue - 如何在 Vue 组件中呈现 HTML

Posted 2023-02-22

【中文标题】Vue - 如何在 Vue 组件中呈现 HTML

【英文标题】：Vue - How to render HTML in vue components

【发布时间】：2019-11-14 20:15:16

【问题描述】：

这就是我想要完成的：

 span('Hello') 

期望的输出应该是：

<span>
   Hello
</span>

这可能吗？

谢谢

【问题讨论】：

显然可以，但您能分享一下您尝试过的方法吗？

你应该使用 JSX 来显示这个目的！关注这里scotch.io/tutorials/using-jsx-with-vue-and-why-you-should-care

@SatyamPathak 好吧，我真正想要完成的是，当打开某个配置时，该方法需要在其周围添加一个“跨度”或“按钮”，以便我可以点击它。

这看起来像是你从根本上避免做的事情！人们需要了解您的方法，而总体结果会掩盖正在发生的事情。

【参考方案1】：

看下面的sn-p-

注意 - 您不能在 内渲染 html，因为它会添加到元素的文本节点中。要将其呈现为 html，您需要使用 v-html 并让您的函数返回 element 包装您的文本

new Vue(
  el: "#app",
  data: 
    foo: 'asdasd'
  ,
  methods: 
   span(text) 
    return `<span> $text </span>`
   
  
)

span 
 color: red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <h1> 
    Render whatever you want
  </h1>
  <div v-html="span('Hello world')" /> 
</div>

【讨论】：

谢谢。我不知道您不能在括号中呈现 HTML。使用您的解决方案继续

感谢您的帮助。它按预期工作:)

【参考方案2】：

<span>Hello</span>

如果你需要动态 HTML 标签 <tag :is="tag">Hello</tag>

Vue.component('tag', 
  props:
     is:type:String, required:true
  ,
  render(h)
    return h(this.tag, this.$slots.default)
  
)
new Vue(
    el:'#vue',
    data()
    return 
        tag:'h1'
    
  
)