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 它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。