CODEWITHSUNDEEP
javascripthtmlvue.js
Iggy
Iggy

Reputation: 5251

How to display strings with angle brackets in Vue?

I am trying to display, literally, angle brackets in Vue. Let's say I want to display on my page, The text "<Hello>". I don't want Vue to render the HTML.

What is the Vue way to do display <hello> on page?

I've tried, unsuccessfully:

v-pre:

<span v-pre>{{ <hello> }}</span>

adding it directly, surrounded by {{}}

{{ <hello>}}

Adding it directly

<hello>

Upvotes: 0

Views: 1282

Answers (1)

T. Short
T. Short

Reputation: 3614

I see you went with the suggestion of using &gt;hello&lt;. Which is fine, I just wanted to share another method in case someone else stumbles upon this question.

<template>
  <div>{{ hello }}</div>
</template>

<script>
export default {
  data() {
    return {
      hello: "<hello>"
    };
  },
};
</script>

Upvotes: 1

Related Questions