Vue基本指令 v-text&v-html

v-text

v-text 指令主要用來編輯標簽中的文本，傳入的值默認是 string 類型，我們也可以添加其他類型變量，或者是表達式和函數

<h1 v-text="str"></h1>
<!-- string類型 -->
<h1 v-text="num"></h1>
<!-- number類型 -->
<h1 v-text="bool"></h1>
<!-- boolean類型 -->
<h1 v-text="str + num"></h1>
<!-- 表達式 -->
<h1 v-text="text(1, '00')"></h1>
<!-- 函數 -->

在 CodeSendBox 上嘗試

v-text 不能編譯 html 代碼，只能輸入固定的值，它會把模板字符串的內容以字符串的形式在雙標簽中打印出來

<div v-text="test()"></div>

test() {
  return `
    <h1>輸入框</h1>
    <input type="text">
  `;
},

在 CodeSendBox 上嘗試

使用 v-text 時，v-text 傳入的內容會替換 DOM 元素的所有子元素

<div v-text="str">
  <h1>這是一個h1標簽</h1>
</div>

在 CodeSendBox 上嘗試

v-html

v-text 能做的 v-html 都能做，v-html 指令主要用來在標簽中編譯 html 代碼，通過 v-html 指令，我們可以把 DOM 的模板字符串編譯進雙標簽之間

<div v-html="test()"></div>

test() {
  return `
    <h1>輸入框</h1>
    <input type="text">
  `;
},

在 CodeSendBox 上嘗試