在 Vue.js 中渲染 html 标签 [英] Rendering html tags in Vue.js

问题描述

我有以下代码:

HTML

<h1>你好{{上标('你好')}}

JS

new Vue({el: "#app",数据: {},方法: {上标(输入){返回 '​​'+ 输入 + '</sup>'}}})

我想要渲染:

<块引用>

你好 ^你好

但是它自己呈现标签而不将其转换为上标.JSfiddle:http://jsfiddle.net/agreyfield91/eywraw8t/188244/

有没有办法通过 Vue.js 方法添加 html 标签?

解决方案

你需要绑定它，而不是渲染 html:

{{ result }} =><span v-html="result"></span>

就你而言:

<h1>你好 <span v-html="superscript('hello')"></span><h1>我希望它看起来像什么:你好  你好

I have the following code:

HTML

<div id="app">
  <h1>
  Hello {{superscript('hello')}}
  </h1>
</div>

JS

new Vue({
  el: "#app",
  data: {
  },
  methods: {
    superscript(input) {
        return '<sup>' + input + '</sup>'
    }
  }
})

I want this to render:

Hello ^hello

But instead it renders the tags themselves without turning it into a superscript. JSfiddle: http://jsfiddle.net/agreyfield91/eywraw8t/188244/

Is there a way to add html tags through a Vue.js method?

解决方案

Instead of rendering the html, you need to bind it:

{{ result }}  => <span v-html="result"></span>

In your case:

<div id="app">
  <h1>
  Hello <span v-html="superscript('hello')"></span>
  </h1>
  <h1>
  What I want it to look like:   Hello <sup>hello</sup>
  </h1>
</div>

这篇关于在 Vue.js 中渲染 html 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！