v-model的用法与解析
仅用于以下控件:
<input>
<select>
<textarea>
组件
v-model以Vue 实例的数据作为数据来源,应当在组件的 data 选项中声明初始值,之后通过监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
在表单控件上使用v-model
v-model根据不同的控件类型,使用不同的属性作为输入并抛出不同的事件:
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio ,单个选项使用checked属性,多个选项,输出value属性的数组,事件使用 change
select 字段将 value 作为 prop 并将 change 作为事件。
1、text 和 textarea 元素绑定value 属性和 input 事件:
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
监听用户的输入,并将value的值给message,所以,当用户有输入时,p标签里的{{ message }}会实时显示用户的输入
注意,在<textarea></textarea>
中使用插值不会生效,而是给它绑定v-model,在另外的地方输出对应的value。
2、checkbox 复选框:单个选项绑定checked属性,多个选项绑定value属性到一个数组,事件为 change :
3、radio单选按钮:
4、select选择框:
(1)只可单选时,绑定选项的value值
2)可多选时,绑定value到一个数组
5、在组件上使用v-moel
组件上的 v-model 默认使用名为 value 的 prop 和名为 input 的事件。
组件的input事件通过组件内部输入框的input事件提交$emit,手动触发。
所以为了保持组件内input的value和input和组件的保持一致,组件内的 必须:
- value 使用作为prop 的value
- input 绑定到组件的input事件
<custom-input v-model="searchText"></custom-input>
//相当于
<custom-input:value="searchText"@input="searchText = $event"
></custom-input>//对应的input
Vue.component('custom-input', {props: ['value'],template: `<input:value="value"@input="$emit('input', $event.target.value)">`
})
以上是v-model的默认操作,但是像复选框用作单个选项这种使用checked属性而不是value属性,可以用实例的model 选项重新定义默认的prop和事件:
Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox":checked="checked":change="$emit('change', $event.target.checked)">`
})
v-model修饰符
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:<input v-model.number="age" type="number">
.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:<input v-model.trim="msg">
转载于
https://www.cnblogs.com/yaoyao-sun/p/10542612.html
v-model的用法与解析相关推荐
- 特斯拉Tesla Model 3整体架构解析(上)
特斯拉Tesla Model 3整体架构解析(上) 一辆特斯拉 Model 3型车在硬件改造后解体 Sensors for ADAS applications 特斯拉 Model 3型设计的传感器组件 ...
- oracle分组聚合查询,Oracle中分组查询group by用法规则解析
本篇文章小编给大家分享一下Oracle中分组查询group by用法规则解析,文章介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. Oracle中group by ...
- python断言assert实例_Python断言assert的用法代码解析
在开发一个程序时候,与其让它运行时崩溃,不如在它出现错误条件时就崩溃(返回错误).这时候断言assert 就显得非常有用. python assert断言是声明布尔值必须为真的判定,如果发生异常就说明 ...
- boost::geometry::model::point用法的测试程序
boost::geometry::model::point用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::point用法的测试程序 C++实现代码 ...
- boost::geometry::model::segment用法的测试程序
boost::geometry::model::segment用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::segment用法的测试程序 C++实 ...
- boost::geometry::model::multi_polygon用法的测试程序
boost::geometry::model::multi_polygon用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::multi_polygon ...
- boost::geometry::model::multi_point用法的测试程序
boost::geometry::model::multi_point用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::multi_point用法的测 ...
- boost::geometry::bg::model::multi_linestring用法的测试程序
boost::geometry::bg::model::multi_linestring用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::bg::model::mu ...
- boost::geometry::model::infinite_line用法的测试程序
boost::geometry::model::infinite_line用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::infinite_line ...
- boost::geometry::model::box用法的测试程序
boost::geometry::model::box用法的测试程序 实现功能 C++实现代码 实现功能 boost::geometry::model::box用法的测试程序 C++实现代码 #inc ...
最新文章
- 转:构建高性能ASP.NET站点 第五章—性能调优综述(中篇)
- 能挣钱的,开源 SpringBoot 商城系统,功能超全,超漂亮,真TMD香!
- React(0.13) 定义一个动态的组件
- 谷歌地图将很快显示电动汽车充电站
- Microsoft VBScript 编译器错误 错误原因 代码大全
- html页面返回原理,浏览器输入URL到界面显示(HTML渲染)发生了什么?
- 初创公司5大Java服务困局,阿里工程师如何打破?
- 京东物流:将连续第10年春节也送货 为坚守岗位一线员工补贴近4亿元
- 基于JAVA+SpringMVC+Mybatis+MYSQL的服装商城
- Linux 下socket通信终极指南(附TCP、UDP完整代码)
- Crash Course经济学笔记
- 计算机打字过程中,关于电脑打字过程中的疑问?
- itop4412的安卓驱动移植
- ONVIF协议--ONVIF协议简介
- 微信小程序跳转微信公众号
- Photoshop学习整理---修复画笔工具
- 电脑ppt录制微课软件哪个好 电脑ppt录制微课的方法
- 湖南省工业职业技术学院 计算机,湖南工业职业技术学院
- 开发人员必备的13项技能
- SAP中由于“己结算申请”未勾选原因导致无法查询到采购申请
热门文章
- java 获取mp3 封面_android 怎样获取歌曲的专辑封面
- 【算法-枚举】淘气的青蛙 自己对解题思路的梳理
- 网易我的世界服务器正在维护,网易《我的世界》Hypixel中国版服务器将停止运营...
- OpenCV第五章练习p163_5~8
- B. TMT Document(思维)
- 计算机文化基础多选,计算机文化基础多选题..pdf
- VectorMapNet | 端到端的矢量化高精地图学习
- 如何看待药物治疗过程中的副作用?
- python更新_python 升级版本
- win10下cuda版本升级