[英]Rendering html tags in Vue.js
I have the following code: 我有以下代码:
HTML HTML
<div id="app">
<h1>
Hello {{superscript('hello')}}
</h1>
</div>
JS 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/
JSfiddle: http : //jsfiddle.net/agreyfield91/eywraw8t/188244/
Is there a way to add html tags through a Vue.js method? 有没有办法通过Vue.js方法添加html标签?
Instead of rendering the html, you need to bind it: 您需要绑定它,而不是呈现html:
{{ 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.