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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
纯js封装的ajax功能函数与用法示例
May 14 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网站开发中常用的8个小技巧
2015/02/13 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
jQuery的一些注意
2006/12/06 Javascript
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
JavaScript实现图片切换效果
2017/08/12 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
企业宣传工作方案
2014/06/02 职场文书
关于颐和园的导游词
2015/01/30 职场文书
新生开学寄语大全
2015/05/28 职场文书
中国合伙人观后感
2015/06/02 职场文书
晚会开幕词范文
2016/03/04 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python