表单实现双向绑定v-model

news/2024/7/10 0:34:05 标签: vue

表单控件在实际开发中非常常见,尤其对于用户信息的提交,需要大量的表单。
vue中通过v-model实现表单元素和数据的双向绑定。
案例:

  • 比如在一个输入框输入内容时,由于input的v-model绑定了message,所以会实时将input框中的value传给message。

  • 另外,当message发生改变时,由于使用了mustach语法(v-bind),将message的值插入到DOM中,DOM实现了双向绑定。

  • 其实v-model只是上述两步骤的语法糖形式,它内部本质上是两个步骤:1. v-bind绑定input的value,将修改的message的值传递给value; 2. 另外,v-on给当前元素绑定input事件.
    -也就是说以下两个代码作用相同
    下面两行代码等同于第一行,第一步将message的值绑定到input表单控件的value中从而显示到页面视图中,这里实现一个单方面model到view的单向绑定;第二步通过v-on:input动态监听表单键入值的改变,通过$event.target.value(一旦界面产生一个事件,浏览器会生成一个event对象)

<input type="text" v-model="message">
-------------------------------------------------
<input type="text" v-bind:value="message"
 v-on:input="message=$event.target.value">


http://www.niftyadmin.cn/n/1263343.html

相关文章

CSS 中奇怪的”UNKOWN“ selector

今天研究一个CSS文件&#xff0c;看到这样一个奇怪的selectorUNKNOWN {height:30px}心里还在嘀咕&#xff0c;是不是CSS又增加新的selector了&#xff0c;上网一查&#xff0c;原来是这么一回事。如果你为了研究其他网站的CSS&#xff0c;在Windows下使用IE用“另存”的方式把网…

Window sessionStorage 属性

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据&#xff0c;sessionStorage 用于临时保存同一窗口(或标签页)的数据&#xff0c;在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据&#xff0c;可以使用 loca…

用户列表实现分页效果

Element UI官方网站提供了一种实现数据分页效果的代码&#xff0c;实现当数据量过多时&#xff0c;使用分页分解数据。基本的代码直接复制过去即可。 这里我选择的是功能最全的一项&#xff1a; <el-paginationsize-change"handleSizeChange"current-change&quo…

element ui出现的问题

问题&#xff1a;使用element-ui的message-box时候&#xff0c;刚刚进入页面,刷新就默认显示出了部分message-box中的内容 解决方案&#xff1a;引入组件的时候不要用Vue.use(MessageBox)&#xff0c;而是挂载到原型上Vue.prototype.$msgbox MessageBox;

[转]给软件开发人员的几点建议

不管做什么&#xff0c;学什么&#xff0c;一要心态好&#xff0c;二要态度好。所谓心态好就是不要着急、不用担心&#xff1b;所谓态度好是多分享、多讨论、学出自己的心得。分享的意义是很大的&#xff0c;在分享之后的认知水平往往比分享之前的高&#xff0c;而且在很多时候…

js三个截取字符的方法

js中有三个截取字符的方法&#xff0c;分别是substring()、substr()、slice()。这三个方法都可以对字符串进行截取&#xff0c;并且返回一个新的字符串&#xff0c;原字符串不会改变。例如&#xff1a; res abcdefgh;console.log(res);res1 res.substr(1, 3);console.log(res…

实现水平居中的几个方法

块级元素实现水平居中利用margin:0 auto来实现&#xff0c;通常该块级元素要指定宽度&#xff1b;行内元素实现的方式是text-align:center&#xff1b;经常用到的一个方法&#xff1a;absoluteleft:50%transformX(-50%)&#xff08;利用绝对定位使元素top:50%; left:50%&#x…

flex语法

阮一峰老师对于flex布局的语法介绍