摘要

v-text 指令用於渲染純文字，它會替換掉元素內部所有的內容。其功能與 {{ }} 相似，但靈活性較低。

定義與說明

v-text 和 {{ }} 都會將資料作為純文字渲染，並逸出 HTML。主要區別在於 v-text 是一個指令，作用於整個元素，會覆蓋其所有子內容；而 {{ }} 是一個插值語法，可以和元素內的其他靜態文字混合使用。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const msg = ref('Hello!');
</script>
<template>
  <!-- 推薦：使用 {{ }}，更靈活 -->
  <span>訊息: {{ msg }}</span>

  <!-- v-text 會覆蓋整個 span 的內容 -->
  <span v-text="msg"></span>
</template>

結論

由於 {{ }} 語法更靈活、更直觀，在絕大多數情況下都是渲染純文字的首選。v-text 的使用場景相對有限。

v-text 純文字渲染插值語法