javascript - 在 Vue.js 中渲染 html 标签

Question

我有以下代码:

HTML

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

JS

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

我要渲染:

Hello ^hello

但是它呈现标签本身而不将其变成上标。 JSfiddle:http://jsfiddle.net/agreyfield91/eywraw8t/188244/

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

Answer 1

您需要绑定(bind)它，而不是渲染 html:

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

在你的情况下:

<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>