{{ }} 语法：将数据作为普通文本输出，不会覆盖原有的内容。
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 表达式，并且数据改变后，页面就会自动更新。
