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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
js Date概念详细介绍
Nov 22 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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函数import_request_variables()用法分析
2016/04/02 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery each()小议
2010/03/18 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Javascript学习指南
2014/12/01 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python中格式化format()方法详解
2017/04/01 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python matplotlib库的基本使用
2020/09/23 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
学校实习推荐信
2015/03/27 职场文书