Vue 2020/4/27

v-text

作用：設定標籤的文字值（textContent）

  <div id="app">
  	//使用v-text標籤的只能顯示出等號後“”內的內容
    <h1 v-text="message+'!?'">!?</h1>
    <h1 v-text="message">!?</h1>
    //下面兩種方法都能顯示出“！?"
    <h1>{{message+"!?"}}</h1>
    <h1>{{message}}!?</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:"#app",
      data:{
        message:"hyh"
      }
    })
  </script>

效果：

v-html

設定標籤的innerHTML

<div id="app">
    <h1 v-html="content1"></h1>
    <h1 v-text="content1"></h1>
    <h1 v-html="content2"></h1>
    <h1 v-text="content2"></h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app=new Vue({
      el:"#app",
      data:{
        content1:"hyh",
        content2:"<a href='http://www.baidu.com'>百度</a>"
      }
    })
  </script>

結果：

如果單純是輸出內容，則v-text和v-html兩者效果沒有區別。
但如果是html連結，v-html則體現除它的作用。

總結

1.原始HTML：v-html 雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令。
2.操作純文字：v-text 它會替代顯示對應的資料物件上的值。當繫結的資料物件上的值發生改變，插值處的內容也會隨之更新。注意：此處為單向繫結，資料物件上的值改變，插值會發生變化；但是當插值發生變化並不會影響資料物件的值。