[vue] 常見用法之 v-html、v-text、v-model區別

v-html 指令： 雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令。

注：在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在使用者提交的內容上。

v-text 指令輸出元素的文字內容。

兩者區別：

<div v-html="element"></div>
<br>
<div v-text="element"></div>

data(){
    return{
      element:'<h3>測試</h3>'
    }
  },

結果：

v-model： 指令常用於表單 < input >、< textarea > 及 < select > 元素上，建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素，負責監聽使用者的輸入事件更新資料。

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值，而總是在元件的 data 選項中宣告初始值。

<input v-model="message" placeholder="請輸入">
<p>Message is: {{ message }}</p>

結果：