1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单控件处理之表单修饰符：lazy/number/trim</title>
  6.     <script src="vue.js"></script>
  7. </head>
  8. <body>
  9. <div id="lantian">
  10.     <!--lazy(懒惰的) ：
  11.         使用lazy修饰符之后，当文本框失去焦点之后，才会更新同input绑定同样数据的数据。
  12.     -->
  13.     lazy修饰符测试：<br>
  14.     <input type="text"  v-model.lazy="lazydata"><br>
  15.     {{lazydata}}<br>
  16.  
  17.     <!--number:
  18.         强制使得输入的数据的字符类型变成number型
  19.     -->
  20.     number修饰符测试：<br>
  21.     <input type="number" v-model.number="numberData"><br>
  22.  
  23.     <!--trim:
  24.         输入的空格，不调用事件方法
  25.     -->
  26.     trim修饰符测试：<br>
  27.     <input type="text" v-model.number.trim="trimData"><br>
  28. </div>
  29. <script>
  30.     var app = new Vue({
  31.         el: '#lantian',
  32.         watch:{
  33.             numberData:function (newData,oldData) {
  34.                 console.log(typeof (newData));//输出：number
  35.             },
  36.             trimData:function (newData,oldData) {
  37.                 console.log(newData.length);
  38.             }
  39.         },
  40.         data: {
  41.             lazydata:'lazy中的默认数据',
  42.             numberData:"number修饰符测试使用的数据",
  43.             trimData:"trimData"
  44.         }
  45.     });
  46. </script>
  47.  
  48. </body>
  49. </html>

　　

037——VUE中表单控件处理之表单修饰符：lazy/number/trim的更多相关文章

  1. 关于bootstrap--表单控件（disabled表单禁用、显示表单验证的样式）

    1.disabled: (1)在input中加入disabled可使表单禁用,如图: <input class="form-control input-lg" id=&quo ...

  2. 表单修饰符.lazy.number.trim

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  3. vue修饰符 .lazy .number .trim

    .lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...

  4. vue表单控件绑定（表单数据的自动收集）

    v-model指令 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇 但 v-model 本质上不过是语法糖,它负责监听用户的 ...

  5. WebForm 【简单控件】【表单元素】

    一.HTML 表单元素复习 (1)文本类 文本框:<input type="text" name="" id="" value=&qu ...

  6. asp.net动态增加服务器端控件并提交表单

    为什么要用原生的呢? 1.目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 .需要考虑到市面上的其他垃圾浏览器. 2.性能不好 如果不考虑第一条 你可以换一种方式 直接上代码 .aspx页面 ...

  7. 上传预览 easyui部分控件获取focuse 表单验证

    js: $(document).ready(function () { //$('#creater').combobox({ // url: '/VMS.UI/BindData/ScheamData? ...

  8. MFC对话框Dialog控件处理程序handler因为public修饰符导致无法访问

    比如说你的Dialog有一个Button名为Confirm,对应IDC_CONFIRM,处理程序handler为OnConfirm 那么OnConfirm必须是protected属性,如果是publi ...

  9. 基于 el-form 封装一个依赖 json 动态渲染的表单控件

    nf-form 表单控件的功能 基于 el-form 封装了一个表单控件,包括表单的子控件. 既然要封装,那么就要完善一些,把能想到的功能都要实现出来,不想留遗憾. 毕竟UI库提供的功能都很强大了,不 ...

随机推荐

  1. CCF 权限查询(模拟)

    试题编号: 201612-3 试题名称: 权限查询 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 授权 (authorization) 是各类业务系统不可缺少的组成部分,系统 ...

  2. -webkit-box

    父容器 display: flex; justify-content: center;/*主轴*/ align-items: center; /*交叉轴*/ display: -webkit-box; ...

  3. 大数据相关的面试题（摘自网络）hbase,kafka,spark

    1.讲讲你做的过的项目, 项目里有哪些难点重点呢?    kafkaDirect ES  /hive  kafka producer   难点值得一提的有两点:  1.rdd中用到外部变量的时候如何处 ...

  4. iOS 使用node js 搭建简单的本地服务器

    一.前提:基于iOS 项目 调用,使用了第三方框架NodeMobile.技术说明关键是 应用生命整个周期只能在应用启动时候开辟的一个线程里申请 一个 node  js 资源.如果终止了运行,重启是不支 ...

  5. Object的各种方法

    Object的一些知识点总结 1.hasOwnProperty obj.hasOwnProperty(prop) 参数 prop: 要检测的属性字符串名称或者Symbol 返回值 用来判断一个对象是否 ...

  6. 安装centos7最小化安装

    分享一篇不错的文章: https://www.howtoforge.com/tutorial/centos-7-server/

  7. 20145322《Java程序设计》第3次实验报告

    实验内容,, 组队使用 git 上传代码并且互相下载对方代码修改之后再上传. 实现代码的重载 一. 使用git 上传代码 过程如图: 仨人成功上传后的代码图如下: 使用git 相互更改代码 执行git ...

  8. 实现在vista和win7中使用管理员权限接收WM_DROPFILES(OnDropFiles())消息的方法（好像XP不支持这个函数）

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #pragma once   #ifndef WM_COPYGLOBALD ...

  9. Hive创建一个简单的UDF

    创建一个类 package com.dufeng.hive; import org.apache.commons.lang.StringUtils; import org.apache.hadoop. ...

  10. uboot下如何查看内存里的数据

    答:使用md工具 md.b $address $count (从地址$address处显示$count个字节的数据,b=byte,8位) md.w $address $count (从地址$addre ...