【Vue表单】v-model的修饰符
2019-05-11 09:27
106 查看
微信订阅号:Rabbit_svip
如xxx链接所示。
输入的第一个只能是数字或者小数点或者是正负号。
在使用v-model绑定单行文本框时,还能用以下修饰符来实现某些需求
v-model的常用修饰符有以下几种
- lazy
- number
- trim
- debounce(在Vue2.0后被移除)
.lazy
在默认情况下,
v-model在input事件中同步输入框的值与数据。
如xxx链接所示。
在添加了lazy之后,会把
oninput事件改成
onchange事件。
以下是核心代码
<input type="text" v-model.lazy="msg">
以下是本例全部代码
<template> <div id="app"> <input type="text" v-model.lazy="msg"><p>{{msg}}</p> </div> </template> <script> export default { name: 'app', data () { return { msg: '' } } } </script>微信订阅号:Rabbit_svip
可以看到,input框输入的内容并不会实时更新到p标签里。因为这里使用了
lazy修饰符,把
oninput事件改成
onchange事件。
.number
number修饰符会把
v-model的值转换成数值类型。
以下是核心代码
<input type="text" v-model.number="msg">
以下是本例全部代码
<template> <div id="app"> <input type="text" v-model.number="msg"><p>{{msg}} : {{typeof(msg)}}</p> </div> </template> <script> export default { name: 'app', data () { return { msg: '' } } } </script>微信订阅号:Rabbit_svip
需要注意的是,如果输入的第一个字是字符串,那
number这个修饰符就不会生效。
输入的第一个只能是数字或者小数点或者是正负号。
从上图可以看到,如果一开始输入的是数字,后面跟着字符串。再
number的转换后,会把后面的字符串删掉。
.trim
trim的作用是过滤用户输入时首尾的空格字符。
以下是核心代码
<input type="text" v-model.trim="msg">
以下是本例全部代码
<template> <div id="app"> <input type="text" v-model.trim="msg"></div> </template> <script> export default { name: 'app', data () { return { msg: '' } }, watch: { msg(newValue) { console.log(newValue); } } } </script>微信订阅号:Rabbit_svip
这里用了
watch来监听
msg,每当
msg的值有更新,就会在控制台输出更新后的值。
从控制台可以看到,我们在值的前后输入空格,通过
trim转换后得到的新值首位的空格都是被清除了。
.debounce
设置一个最小的延时,在每次输入之后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作(例如,在输入提示中的AJAX请求)时,它比较有用。
但实际上,这是控制了状态更新的频率,而不是控制高耗时任务本身。这是个微小的差别,但是会随着应用增长而显现出局限性。
所以在Vue2.0之后就被移除了。
<input type="text" v-model="msg" debounce="500">
延时500毫秒。
如果想用这个修饰符,就需要使用Vue2.0之前的版本。
相关文章推荐
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- Vue 的(v-model)表单控件绑定
- vue.js 表单控件 输入绑定 v-model的使用
- Vue的v-model的几种修饰符.lazy,.number和.trim的介绍
- vue表单应用 v-model
- 说说 Vue.js 中的 v-model 指令以及如何绑定表单元素
- Vue------第四天(事件处理:事件监听、修饰符等;表单输入绑定:基础用法、值绑定)
- Vue表单demo v-model双向绑定问题
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- Vue.js中 v-model 指令的修饰符详解
- Vue.js 中的 v-model 指令及绑定表单元素的方法
- Vue.js 学习(8) -- v-model: 表单控件绑定
- vue:v-model双向绑定中的修饰符
- vue自定v-model实现表单数据双向绑定问题
- vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
- vue基础篇- 表单与v-model(第六章)
- VUE v-model表单数据双向绑定完整示例
- vue v-model表单控件绑定详解
- Vue.js实战—表单与v-model
- vue基础 学习之v-model (表单控件绑定)