Vue表单修饰符(lazy,number,trim)
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步
<div id="example">
<input type="text" v-model.lazy="message">
<p>{{ message }}</p>
</div> new Vue({
el:"#example",
data:{
message:""
}
})
这样输入了数字并没有显示出来而是当移开光标后在触发
number
首先谁明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number 类型
举个例子,如果用户输入300
,data 中绑定的其实是'300'
(string),添加 number 指令后可以得到 300
(number)的绑定结果。
而如果用户输入的不是数字,这个指令并不会产生任何效果。
上代码:
1 <div id="example">
2 <input type="text" v-model.number="message">
3 <p>{{ message }}</p>
4 <button @click="assay()">获取当前的类型</button>
5 </div>
1 new Vue({
2 el:"#example",
3 data:{
4 message:""
5 },
6 methods:{
7 assay(){
8 alert(typeof this.message);
9 }
10 }
11 })
当不加number修饰符输入123456..数字的时候显示的类型为string
而加了number修饰符就变成了number类型
当你输入的不是数字就不起作用了
trim可以用来过滤前后的空格
当使用了trim修饰符后
这样就自动过滤用户输入的首尾空白字符
Vue表单修饰符(lazy,number,trim)的更多相关文章
- 表单修饰符.lazy.number.trim
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...
- Vue - 表单修饰符
.lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 . 使用 lazy 修饰符,从而转变为使用 change 事件进行同步 <div id=&qu ...
- 037——VUE中表单控件处理之表单修饰符:lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 表单基本 表单修饰符
表单的基础 利用v-model进行双向数据绑定: 1.在下拉列表中,将v-model写在select中 2.单选框和复选框需要每个按钮都需要写上v-model 3.v-model在输入框中获取得是输入 ...
- 表单修饰符 number、trim、lazy
number修饰符 <input type="number" v-model.number="age"> 结论:age 类型则为number,非字符 ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue表单详解——小白速会
一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的 ...
- vue表单控件绑定(表单数据的自动收集)
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
随机推荐
- js中的模块化
前阵子一直忙着找实习,发现已经有一段时间没写博客了,面试很多时候会被问到模块化,今天就让我们一起来总结下把 一.什么是模块化 在js出现的时候,js一般只是用来实现一些简单的交互,后来js开始得到重视 ...
- Vxlan学习笔记——原理
1. 为什么需要Vxlan 普通的VLAN数量只有4096个,无法满足大规模云计算IDC的需求,而IDC为何需求那么多VLAN呢,因为目前大部分IDC内部结构主要分为两种L2,L3.L2结构里面,所有 ...
- c语言中阶乘的精确值
对于大数的操作,可能超出int,甚至long的表示范围,对此,可以使用数组来存储大数,下列代码为求1000以内数的阶乘的代码,代码如下: #include <stdio.h> #inclu ...
- C#winform窗体用户控件自定义事件
C#许多事情都和事件有关系,大部分的事情我们可以通过C#自己的事件来完成,但如果我们自己新建了一个自定义控件,我们该如何定义自己想要的事件呢?下面我就来为大家粗略的讲解一番. 假设我们自定义了一个控件 ...
- NLog基础配置
<?xml version="1.0" encoding="utf-8" ?> <nlog xmlns="http://www.nl ...
- ECMAScript 引用类型
Object对象 新建对象 var obj = new Object() var obj ={} var obj={age:23} ... hasOwnProperty(property) 方法 va ...
- VB.NET 窗體操作
Private Sub A1() '加载窗体 frm1.Show() End Sub Private Sub A2() '離開 Process.GetCurrentProcess().Kill() E ...
- DataTable的一个简单的扩展
我们在调试代码的时候经常遇到DataTable的数据类型错误,这个类可以帮助我们很快查看DataTable的结构信息. /// <summary> /// DataTable扩展类 /// ...
- Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...
- 微信小程序上传图片,视频及预览
wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...