[vue] 常见用法之 v-html、v-text、v-model区别
v-model: 指令常用于表单 < input >、< textarea > 及 < select > 元素上,创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,负责监听用户的输入事件更新数据。v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值,而总是在组件的 data 选项中声明初始值。&l...
·
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>
结果:
更多推荐
已为社区贡献3条内容
所有评论(0)