码迷,mamicode.com
首页 > 其他好文 > 详细

VUE表单元素双向数据绑定

时间:2020-03-04 14:24:22      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:不选中   check   属性   checkbox   mode   bsp   变化   sel   界面   

什么是双向绑定:

即可以将内存中的数据绑定到界面上,同时又能将界面的修改反向更新回模型变量中(M-V,V-M)

何时使用双向绑定:

当需要绑定表单元素的值时,就使用双向绑定。

如何使用双向绑定:

<表单元素 v-model:value="模型变量">,其中:value可省略

双向绑定的原理:

Vue用一个死循环,反复扫描虚拟DOM树中的每个节点一一监视比对,如果希望只要界面发生变化,就立刻自动执行操作时:利用watch监视模型变量。(watch和methods同级)

 

只要绑定表单元素的值都用v-model,v-model相对于:不但可以把内存中的值绑到页面,当页面发生修改还会自动更新到内存中。(v-model双向绑定,:value单向)

键盘事件@keyup.13,限制只有按键盘回车键(13)时才执行操作。 

 

各种表单元素的双向绑定:

①文本框:<input type="text">和文本域:<textarea> 都是绑定value

           <ANY v-model="模型变量"> v-model自动绑定value属性

②单选按钮:<input type="radio" name="分组名" value="值" v-model="模型变量">

           分组使用:M-V  如果模型变量的值等于value,则当前radio标签选中,否则不选中。

(lable标签可以扩大选中区域,name属性来锁定radio标签的单选范围)          

                          V-M 将当前选中的radio元素的value值自动更新回模型变量。

③多选框:

          <input type="checkbox" v-model="模型变量">

          单用:自动绑定的是checked属性

④select:

          <select v-model="模型变量">

                <option value="值">

                <option value="值">

                ... ...

          M-V: 用模型变量的值和每个option的value做比较,如果某个option的value等于模型变量的值,则该option被选中。

          V_M:当选中项发生改变的时候,自动将选中项的value,更新到模型变量中。

 

MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
1、 M:模型层,主要负责业务数据相关;
2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;

MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;

 

VUE表单元素双向数据绑定

标签:不选中   check   属性   checkbox   mode   bsp   变化   sel   界面   

原文地址:https://www.cnblogs.com/goforxiaobo/p/12409177.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!