Vue.js--表单修饰符（.lazy、.number、.trim）详解

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据（除了输入法中文输入的情况），使用修饰符 .lazy 会转变为 change 事件中同步（类似懒加载）:

<div id="app1"><input type="text" v-model.lazy="message"><p>{{message}}</p>
</div>
<script>var app1 = new Vue({el: '#app1',data: {message:'测试'}});
</script>

此时，message并不是实时更新的，而是在失焦或按回车时才更新。

.number

使用修饰符 .number 可以将输入转换为Number类型，否则虽然输入的数字，但它的类型其实是String，比如在数字输入框时非常有用：

<div id="app2"><input type="number" v-model.number="message"><p>{{ typeof message }}</p><br><p>{{message}}</p>
</div>
<script>var app2 = new Vue({el: '#app2',data: {message: 123}});
</script>

.trim

修饰符 .trim 可以自动过滤输入的首尾空格。

<div id="app3"><textarea name="txt" id="" cols="30" rows="10" v-model.trim="message"></textarea><p>{{message}}</p>
</div>
<script>var app3 = new Vue({el: '#app3',data: {message: ''}});
</script>

Vue.js--表单修饰符（.lazy、.number、.trim）详解相关推荐

[vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点或者按下回车键时才更新 <template>< ...
修饰符.lazy .number .trim
1.lazy v-model 在每次 input 事件触发后将输入框的值与数据进行同步,也就是在失去焦点或者按下回车键时才更新 <template><div><p> ...
037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
表单下拉框、表单修饰符（.lazy、.number、.trim）
表单下拉框知识点 v-model select 表单下拉框绑定 <div id="myApp"><h3>你最喜欢的NBA球星是:</h3>&l ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
[vue] 写出你知道的表单修饰符和事件修饰符
[vue] 写出你知道的表单修饰符和事件修饰符事件修饰符.stop .prevent .capture .self .once .passive 表单修饰符.number .lazy .trim 个 ...
微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解（上）
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
mvc ajax提交html标签,Mvc提交表单的四种方法全程详解
Mvc提交表单的四种方法全程详解 2019-01-05 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了Mvc提交表单的四种方法全程详解,编程之家小编觉得挺不错的 ...
功能表单之人员构造器字段类型详解—JEPLUS软件快速开发平台
为什么80%的码农都做不了架构师?>>> JEPLUS功能表单之人员构造器字段类型详解大家平时在开发过程中会遇到各种各样的选择人员的操作,比如负责人,登记人,当前操作人,部门 ...

Vue.js--表单修饰符（.lazy、.number、.trim）详解

.lazy

.number

.trim

Vue.js--表单修饰符（.lazy、.number、.trim）详解相关推荐

最新文章

热门文章