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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
jQuery中extend函数详解
Feb 13 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 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重定向的3种方式
2013/03/07 PHP
PHP curl使用实例
2015/07/02 PHP
php字符串操作常见问题小结
2016/10/11 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
怎么清空javascript数组
2013/05/11 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
linux 下实现python多版本安装实践
2014/11/18 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
优质的学校老师推荐信
2013/10/28 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书