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库提供的功能都很强大了,不 ...
随机推荐
- Python中常用技巧整理
Python中os.path的妙用 http://xpleaf.blog.51cto.com/9315560/1736956
- C语言基础温故
一.C语言中数组动态增长有哪些方法? 1.在原数组单元后面是没法再扩长的,因为后面的单元没法保证一定有.所以,数组原址动态增长肯定是不行的: 2.要么定义长一点的数组,要么自已把N个数组用链表串起来, ...
- JAVA学习笔记之JAVA 对象引用以及赋值
关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里,总觉得基本概念很模糊.后来才知道,在许多Java书中,把对象和对象的引用混为一谈.可是,如果我分不清对象与对象引用, 那实在没 ...
- RabbitMQ学习之（三）_Centos6下RabbitMQ PHP扩展的安装
安装rabbitmq-c依赖包 yum install libtool autoconf 下载安装rabbitmq-c wget https://github.com/alanxz/rabbitmq- ...
- GIT使用—提交的查找与变更
一.查找提交 (1)git bisect(二分搜索法) 基于任意搜索条件查找特定的错误提交.在排查某个提交版本导致的错误时非常有用. [root@localhost public_html]# git ...
- MysQL使用一高级应用（下）
连接查询 连接查询分类如下: 表A inner join 表B:表A与表B匹配的行会出现在结果中 表A left join 表B:表A与表B匹配的行会出现在结果中,外加表A中独有的数据,未对应的数据使 ...
- tomcat配置根目录访问后，部署后第一次访问会出现tomcat的默认界面而非项目首页
tomcat配置根目录访问后,部署后第一次访问会出现tomcat的默认界面而非项目首页,而重启后会正常,这个原因是因为在配置文件中有如下配置,造成项目加载两次 <Host name=" ...
- android emulator 安装中文输入法
android emulator 模拟器内置没有中文输入法,有些情况下我们需要输入正文就比较麻烦. 在模拟器的浏览器中下载输入法然后安装,会提示系统不兼容的情况. 这是由于Android应用多基于AR ...
- git 常用命令速查
git 常用命令速查 命令速查表 一.克隆项目 把远程仓库上的项目克隆到本地.一般来说项目是有1个或2个分支,主要是做开发和线上的区别.既然所属分支不一样,那命令也会有一点区别.这里假设是有2个分支, ...
- Javase、Javaee、Javame的区别
/*简而言之,javase是基础,要先学,javaee是企业级,接着学,然后可以转到javaweb方向,javame是做移动应用的.基础必须先学,然后再考虑下一步*/ Java 平台有三个版本,这使软 ...