Vue渲染内容的三种方式

{{ }} 语法：将数据作为普通文本输出，不会覆盖原有的内容。

v-text 指令：将数据作为普通文本输出，会覆盖原有的内容。

v-html 指令：将数据作为 HTML 标签解析后输出，会覆盖原有的内容。

注：一定要在可信的内容上使用 v-html，永远不要在用户提交的内容上使用，避免坏人利用动态渲染，获取用户的 cookie 进行 XSS 攻击。

语法格式：

<div>{{ 数据 }}</div>

<div v-text="数据"></div>

<div v-html="数据"></div>

渲染普通文本

<template>
  <h3 v-pre>使用 {{ }} 语法渲染</h3>
  <p>{{ data }}</p>
  <hr />
  <h3>使用 v-text 语法渲染</h3>
  <p v-text="data"></p>
  <hr />
  <h3>使用 v-html 语法渲染</h3>
  <p v-html="data"></p>
  <hr />
</template>

<script setup>
import { ref } from "vue";
let data = ref("你好呀！");
</script>

注：v-text 和 v-html 必须在空标签中使用，不允许有其它内容，否则就会报错。 

渲染富文本

<template>
  <h3 v-pre>使用 {{ }} 语法渲染</h3>
  <p>{{ data }}</p>
  <hr />
  <h3>使用 v-text 语法渲染</h3>
  <p v-text="data"></p>
  <hr />
  <h3>使用 v-html 语法渲染</h3>
  <p v-html="data"></p>
  <hr />
</template>

<script setup>
import { ref } from "vue";
let data = ref("<b>我是b标签</b>");
</script>

注：只有 v-html 可以将数据中的 HTML 标签解析渲染到页面中。 

渲染 JS 表达式

<template>
  <h3 v-pre>使用 {{ }} 语法渲染</h3>
  <p>{{ data * 10 }}</p>
  <hr />
  <h3>使用 v-text 语法渲染</h3>
  <p v-text="data * 10"></p>
  <hr />
  <h3>使用 v-html 语法渲染</h3>
  <p v-html="data * 10"></p>
  <hr />
  <button @click="data++">点击加一</button>
</template>

<script setup>
import { ref } from "vue";
let data = ref(1);
</script>

注：可以编写任意的 JS 表达式，并且数据改变后，页面就会自动更新。

原创作者：吴小糖

创建时间：2023.12.1