037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件处理之表单修饰符：lazy/number/trim</title>
<script src="vue.js"></script>
</head>
<body>
<div id="lantian">
<!--lazy(懒惰的) ：
使用lazy修饰符之后，当文本框失去焦点之后，才会更新同input绑定同样数据的数据。
-->
lazy修饰符测试：<br>
<input type="text" v-model.lazy="lazydata"><br>
{{lazydata}}<br> <!--number:
强制使得输入的数据的字符类型变成number型
-->
number修饰符测试：<br>
<input type="number" v-model.number="numberData"><br> <!--trim:
输入的空格，不调用事件方法
-->
trim修饰符测试：<br>
<input type="text" v-model.number.trim="trimData"><br>
</div>
<script>
var app = new Vue({
el: '#lantian',
watch:{
numberData:function (newData,oldData) {
console.log(typeof (newData));//输出：number
},
trimData:function (newData,oldData) {
console.log(newData.length);
}
},
data: {
lazydata:'lazy中的默认数据',
numberData:"number修饰符测试使用的数据",
trimData:"trimData"
}
});
</script> </body>
</html>
037——VUE中表单控件处理之表单修饰符：lazy/number/trim的更多相关文章
- 关于bootstrap--表单控件（disabled表单禁用、显示表单验证的样式）
1.disabled: (1)在input中加入disabled可使表单禁用,如图: <input class="form-control input-lg" id=&quo ...
- 表单修饰符.lazy.number.trim
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...
- vue表单控件绑定（表单数据的自动收集）
v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...
- WebForm 【简单控件】【表单元素】
一.HTML 表单元素复习 (1)文本类 文本框:<input type="text" name="" id="" value=&qu ...
- asp.net动态增加服务器端控件并提交表单
为什么要用原生的呢? 1.目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 .需要考虑到市面上的其他垃圾浏览器. 2.性能不好 如果不考虑第一条 你可以换一种方式 直接上代码 .aspx页面 ...
- 上传预览 easyui部分控件获取focuse 表单验证
js: $(document).ready(function () { //$('#creater').combobox({ // url: '/VMS.UI/BindData/ScheamData? ...
- MFC对话框Dialog控件处理程序handler因为public修饰符导致无法访问
比如说你的Dialog有一个Button名为Confirm,对应IDC_CONFIRM,处理程序handler为OnConfirm 那么OnConfirm必须是protected属性,如果是publi ...
- 基于 el-form 封装一个依赖 json 动态渲染的表单控件
nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...
随机推荐
- vue生命周期探究（二）
vue生命周期探究(二) 转载自:https://segmentfault.com/a/1190000008923105 上一章我们介绍了vue的组件生命周期和路由勾子,这一章,让我们来看看在vue- ...
- (转载)sql注入实战 mysql篇
出现的关键名词有: UNION SELECT load_file hex 为了方便说明我们先创建两个表:hehe和heihei,很明显它们一个拥有2列属性,一个拥有3列属性 ======== ...
- ionic android - Unable to start the daemon process. Could not reserve enough space for 2097152KB object heap
Unzipping C:\Users\app\.gradle\wrapper\dists\gradle-4.1-all\bzyivzo6n839fup2jbap0tjew\gradle-4.1-all ...
- 从HighGUI的一段代码中看OpenCV打开视频的方式
OpenCV的HighGUI提供了视频和摄像头的直接打开.那么它是如何实现的了?这里进行初步分析. ; switch(apiPreference) { default: ...
- RocEDU.阅读.写作《乌合之众》（二）
第二卷 群体的意见与信念 决定着群体意见与信念的因素分为两类:直接因素与间接因素. 直接因素:使观念采取一定形式并且使它能够产生一定结果的因素. 间接因素:能够使群体接受某些信念并使其难以接受别的信念 ...
- 4.9版本的linux内核中eeprom存储芯片at24c512的驱动源码在哪里
答:drivers/misc/eeprom/at24.c,内核配置项为CONFIG_EEPROM_AT24 Location: -> Device Drivers -> Misc devi ...
- KVM配置及维护
kvm使用场景 1.公司测试环境/开发环境 测试开发环境可以使用配置低点的物理机就可以 2.公司生产环境 一般小公司没有私有云或容器团队,运维人员可能就1-2个,然后公司也不舍得花钱买商业化的私有云. ...
- Windows下实现mysql定时备份
1.写MySQL备份bat处理 @echo off set "yMd=%date:~,4%%date:~5,2%%date:~8,2%" set "hms=%time:~ ...
- Vjudge - B - 这是测试你会不会排序
2017-07-14 22:44:11 writer:pprp 题目: 他们提出的比赛规则是这样的: 1. 每方派出n个人参赛: 2. 出赛的顺序必须是从弱到强(主要担心中国人擅长的田忌赛马): ...
- 淘海外分发Job 多线程demo
using System;using System.Collections.Generic;using System.Configuration;using System.Diagnostics;us ...