Vue v-model收集表单数据
创始人
2024-03-20 14:05:16
0

Vue v-model收集表单数据

  • 1 单行文本
  • 2 多行文本
  • 3 复选框
  • 4 单选按钮
  • 5 选择器
  • 6 修饰符

1 单行文本

对于输入框input,直接使用v-model绑定属性即可,该属性需要在data中定义。用法如下:


var vm = new Vue({...data: {content: ""}
})

示例:在输入框中输入内容,该内容显示在输入框下


{{content}}

在这里插入图片描述

2 多行文本

多行文本textarea直接使用v-model绑定属性即可,该属性在data中定义。具体如下:


var vm = new Vue({...data: {text: ""}
})

示例代码:


{{ text }}

在这里插入图片描述

3 复选框

复选框除了要用v-model绑定名称之外,还需要给input传递value值,表示选中之后的值。具体如下:


无论出现几个复选框,这一组复选框的v-model的值都是xxxvalue值则根据按钮的内容随意设置。如果是选项组,则在data中要初始化xxx为空数组,如果是单个复选框,初始化为空字符串即可,具体如下:

var vm = new Vue({el: "#app",data: {xxx: [] / ""}
})

示例代码:

苹果香蕉鸭梨
爱吃的水果有:{{fruit}}

在这里插入图片描述

4 单选按钮

单选按钮除了要用v-model绑定名称之外,还需要给input传递value值,表示选中之后的值。具体如下:


单选按钮一般是搭配使用的,那么这一组的单选按钮的v-model的值都是xxxvalue值则根据按钮的内容随意设置。如果默认选中某个按钮,则xxx需要在data中初始化为该按钮的value值,具体如下:

var vm = new Vue({el: "#app",data: {xxx: "value1" // 表示默认选中value值为value1的选项}
})

示例代码:

OneTwoThree
选中的值是:{{number}}

在这里插入图片描述

5 选择器

选择器要在select上面使用v-model绑定属性,并且这个属性要在data中进行定义,而option可以选择是否传入value属性,如果传入了value属性,那么属性的值为value值,如果没有传入,属性的值为选项的内容。具体如下:


var vm = new Vue({el: "#app",data: {xxx: ""}
})

示例代码:

选择了:{{hasValue}}

在这里插入图片描述
在上面的效果中,我们可以看到,最初的时候选择器是空白的,如果要设置一个默认选项,那么在data中定义的属性值要初始化,有value属性要初始化为value属性,无则初始化为option的内容。

var vm = new Vue({el: "#app",data: {xxx: "value值/option的内容"}
})

示例代码:

选择了:{{hasValue}}

在这里插入图片描述

6 修饰符

v-model提供了一些修饰符:

修饰符说明
.number将输入的合法符串转为数字
.lazy监听change事件而不是input
.trim移除输入内容两端空格

例如,当收集用户年龄时,类型应该是number,但是input收集的内容是string类型:

在这里插入图片描述
这是需要用到.number修饰符,将类型改为number类型:


在这里插入图片描述


例如,当输入框会输入很多内容时,v-model会对内容实时进行监视,使用.lazy修饰符可以在内容全部输入完成之后,文本框失去焦点时再获取:

具体内容:{{text}}

在这里插入图片描述

相关内容

热门资讯

新华解码丨上市公司治理制度再升... 新华社北京7月25日电 题:上市公司治理制度再升级 瞄准“关键少数”健全激励约束 新华社记者刘慧、刘...
泰方打击柬埔寨军事设施,“海陆... 泰国海军15时40分发布消息称,泰国出动F-16战机和鹰狮战机,对茄子山和塔曼通古寺附近柬埔寨军事设...
【财闻联播】北大将全面取消绩点... ★ 宏观动态 ★ 上海“无人驾驶出租车”进入新阶段,浦东机场到迪士尼将实现无人驾驶直达 2025年7...
【中国之声】最高法推动适用“失... 编者按: 司法裁判不仅仅是个案的定分止争,更肩负着引领社会发展、推动法治进步的重要职责。面对社会生活...
半场-莱奥破门后致敬若塔索博十... 直播吧7月26日讯 北京时间7月26日19:30,利物浦与AC米兰在启德体育场进行季前友谊赛。上半场...
原创 当... 据环球时报报道,7月24日,泰国和柬埔寨军队在两国边境争议地区发生交火,双方各执一词,一时间局势紧张...
央广财评|财政政策更加积极 有... 近日披露的上半年财政收支情况显示,全国一般公共预算支出达到14.13万亿元,同比增长3.4%。其中,...
四两拨千斤 !索博斯洛伊原地摆... 直播吧07月26日讯 利物浦vsAC米兰第26分钟,索博斯洛伊原地摆腿吊射死角,利物浦1-1扳平AC...
民生政策 落地有声|从“老有所... 当前,我国人口老龄化程度加深,建立长期护理保险制度,是守护“一老”的重要之举。 国家医疗保障局副局...
全球连线|政策红利持续释放 中... 中国实施的免签政策持续释放吸引力,入境旅游市场热度今夏继续攀升,同时中国游客前往东南亚热度不减,其中...