返回

【前端】学习前端vue框架,了解了什么是v-model

发布时间:2022-11-20 12:37:51 327
# javascript# html# webkit# java# 数据

什么是v-model呢?

v-model指令可以在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 所以,应该通过 JavaScript 在组件的 data 选项中声明初始值。

什么是双向数据绑定?

代码实例:

<!DOCTYPE html>

<html lang="en"> <body> <div id="app"> <input type="text" v-model="message"> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ message:'你好啊!' } }) </script> </body> </html>

message的数据改变,input输入框中的数据会随之变化。input输入框中的数据变化了,message的数据也会改变 v-model其实是一个语法糖,它背后的本质是两个操作 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 这个在vue.js文档里面有详细的说明。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线