一、v-text与v-html

v-text指令的作用是:设置标签的内容(textContent)，默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容， 内部支持写表达式。

v-html指令的作用是:设置元素的innerHTML，内容中有html结构会被解析为标签，v-text指令无论内容是什么,只会解析为文本，解析文本使用v-text,需要解析html结构使用v-html。

除此之外还有v-once、v-pre等标签，具体可以参看官方文档：https://cn.vuejs.org/v2/api 。

二、操作示例

代码如下：

<pre data-language="HTML">```markup

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <!--v-text:正常文本输出，显示标签和标签的内容，
  v-html:解析标签，不显示标签，只显示标签中的内容，
  v-once:只绑定一次，vue中写的什么就输出什么，
  v-pre:原样输出，标签中写什么就输出什么，-->
   <div id="app">
      <input type="" v-model="msg">
      <p v-text="msg +'361way'"></p>
      <h2 v-text>{{msg}}</h2>
      <h3 v-html="htmlmsg +'361way'"></h3>
      <p v-pre>{{msg}}</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el:"#app",
           data:{
               msg:"运维之路！！！",
               htmlmsg:'<a style="color:red" href="https://blog.361way.com">运维之路</a>'
           }
       })
    </script>
</body>
</html>


上面的代码效果如下：

![vue-text-html](https://blog.361way.com/wp-content/uploads/2019/06/vue-text-html.png "vue-text-html")

</body></html>