v-text-and-v-html

v-text

v-text sets the text content of an element to the result of a given expression.

Here's a basic example of using v-text to display a user's username:

<script setup>
import { ref } from 'vue'

// reactive data
const username = ref("pirate dev")
</script>

<template>
  <div>
    Username: <strong v-text="username"></strong>
  </div>
</template>

Now the <strong> tag's inner text content will be set to "pirate dev".

v-html

v-html sets the "innerHTML" property of an element to the result of a given expression.

WARNING

Use this only on trusted content and never on user-provided content. Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.

Here's a basic example of using v-html to display a user's username:

<script setup>
import { ref } from 'vue'

// reactive data
const username = ref('<strong>pirate dev</strong>')
</script>

<template>
  <div>
    Username: <span v-html="username"></span>
  </div>
</template>

Now the <span> tag's inner HTML will be set to <strong>pirate dev</strong>.