Vue input控件通过value绑定动态属性及修饰符的方法


Posted in Javascript onMay 03, 2017

对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

但是有时我们想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串。

举个最容易认知的例子

<input type="radio" v-model="pick" v-bind:value="a">
//当只有v-model的情况下,我们绑定了VUE实例中的pick这个数据,而这数据往往都是字符串或者是逻辑值,而如今通过v-bind绑定value,意味着,value是一个可变的数据 a,而不是字符串'a',而v-model在这个控件选定后的值就是指向value,而用v-bind绑定后,指向的值又是一个动态属性,所以此时就可以通过a这个动态属性来更改v-model绑定的值,其他的控件也是如此,比如select等
// 当选中时
vm.pick === vm.a

.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分),但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

//测试是在失去焦点的时候才更新,而不是实时更新

<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

<input v-model.number="age" type="number">
{{typeof age}}//如果输入的是字符串则是string,如果是数字字符串则转换成number

这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

<input v-model.trim="msg">

以上所述是小编给大家介绍的Vue input控件通过value绑定动态属性及修饰符的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
ES6中参数的默认值语法介绍
May 03 #Javascript
Express之get,pos请求参数的获取
May 02 #Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 #Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 #Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 #Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 #Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 #Javascript
You might like
PHP goto语句简介和使用实例
2014/03/11 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python中的函数作用域
2018/05/07 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
python 文件查找及内容匹配方法
2018/10/25 Python
详解Python 切片语法
2019/06/10 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python自动点赞功能的实现思路
2020/02/26 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
关于Python错误重试方法总结
2021/01/03 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
安全员岗位职责
2013/11/11 职场文书
旅游活动总结
2014/08/27 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
教师工作证明范本
2015/06/12 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python+Appium新手教程
2021/04/17 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Python OpenCV实现图形检测示例详解
2022/04/08 Python