Vue渲染内容的三种方式

本文介绍: Vue 渲染内容的三种方式

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

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

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

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

语法 格式：

&lt;div&gt;{{ 数据 }}</div&gt;

<div v-text="数据"&gt;</div&gt;

<div v-html="数据"&gt;</div&gt;

渲染普通文本

<template&gt;
  <h3 v-pre&gt;使用 {{ }} 语法渲染</h3&gt;
  <p&gt;{{ 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-ht ml 可以将数据中的 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>