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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With