当前位置: 首页 > Web前端 > vue.js

我是怎么学vue的13:v-model表单数据双向绑定

时间:2023-04-01 12:18:32 vue.js

什么是双向绑定?数据中有什么,input中就显示什么,修改input中的数据会同步修改data中对应的数据。1、v-model结合type类型使用

输入数据,数据中的message是一个二-way绑定明白了。2.使用v-modelwithradiotype
此时,在data的sex属性中,存储了sex的值。radio单选框实现单选(独占)的方法有2种:多个radio添加相同的name属性name='sex'多个radio添加相同的v-model属性v-model='sex'3.v-该模型可以与复选框类型结合使用,以将复选框用作单选框或多选框。3.1复选框用作单选按钮。复选框用作单选按钮。一般用于查看《用户协议》。用户选中后,可以取消选中(如果使用单选按钮,用户选中后无法取消)。AgreementAgreement数据:data中存储的isAgree是一个布尔值,true为勾选,False未检查。3.2checkbox用作多选框basketballfootballtabletennis羽毛球数据:创建一个新的数据数组hobbies会自动存储这些数据的值。4.v-model与select类型结合使用(不常用)4.1单选apple香蕉榴莲葡萄数据:数据:{fruit:'banana'//Set设置一个默认值,如果不设置次数,留空}4.2多选(添加multiple属性)(使用Ctrl多选)苹果香蕉榴莲Grapedata:data:{fruits:[]}5.输入值的绑定有时候在表单上显示什么和表单元素的值不是硬编码的,而是动态的根据服务器传输的数据显示。这时候就需要给输入绑定一个值。示例:这段代码中的数据是硬编码的,但是在实际开发中,显示什么取决于服务器传入的数据,所以这里需要动态显示。篮球足球乒乓球羽毛球动态展示版(id也可以动态绑定):{{item}}data:data:{hobbies:[],//多选框,originHobbies:['篮球','足球','乒乓球','羽毛球','台球','高尔夫']}6.v-model的修饰符6.1懒加载懒加载可以达到“用着就加载”的效果。用途:v-model是双向绑定,比如输入,我输入一个字符,马上同步到数据。但是这个更新频率太高了。希望在用户打完回车或者input失去焦点后将用户输入的数据同步到data中。6.2number限制只能输入数字如果不加.number,即使用户输入的是数字,vue存储在data中的数据类型也会是字符串。添加后data中存储的数据类型为number。6.3trim去除字符串两边的空格