[vue] 常见用法之 v-html、v-text、v-model区别

v-html 指令: 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令。

:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。

v-text 指令输出元素的文本内容。

两者区别:


data(){ return{ element:'

测试

' } },

结果:
在这里插入图片描述
v-model: 指令常用于表单 < input >、< textarea > 及 < select > 元素上,创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,负责监听用户的输入事件更新数据。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值,而总是在组件的 data 选项中声明初始值。


Message is: {{ message }}

结果:
在这里插入图片描述

你可能感兴趣的:(Vue)