[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>

结果：