<!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的更多相关文章

  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. 【c++ primer, 5e】设计Sales_data类 & 定义改进的Sales_data类

    [设计Sales_data类] 1.考虑Sales_data类应该有那些接口. isbn.combine.add.read.print... 2.考虑如何使用这些接口. Sales_data tota ...

  2. MVC readioButtonList的创作过程及运用

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Li ...

  3. Junit中的setup和teardown方法

    setup需要@before注解,实现测试前的初始化工作 teardown需要@after注解,测试完成后垃圾回收等后续工作

  4. goquery常用语法

    Find 查找获取当前匹配的每个元素的后代Eq 选择第几个Attr 获取对应的标签属性AttrOr 获取对应的标签属性.这个可以设置第二个参数.获取的默认值 如果获取不到默认调用对应默认值Each 遍 ...

  5. 20145328 《Java程序设计》第8周学习总结

    20145328 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),re ...

  6. 八皇后问题解题报告(dfs

    这里是代码传送门 所谓八皇后问题,一开始接触,上学期舍友提及的,但是因为各种原因,水平不够,并没有关心,偶然之间,再次遇见,便进行的尝试(棋盘是0-7的,不是1-8的...开始打弄错了) 所谓八皇后问 ...

  7. Kafka架构

    一.Kafka介绍 Kafka是Linkin在2010年开源的分布式发布订阅消息系统,Kafka是高吞吐量的消息订阅系统. 二.Kafka结构 Kafka由三部分构成,producer.broker. ...

  8. Oracle查询一个表的数据插入到另一个表

    1. 新增一个表,通过另一个表的结构和数据 create table XTHAME.tab1 as select * from DSKNOW.COMBDVERSION 2. 如果表存在: insert ...

  9. 推荐个非常简单好用的AOP -- MrAdvice

    https://github.com/ArxOne/MrAdvice 太简单了,写好自己的处理类, 作为Attribute加到要拦截的方法或者类上就可以了. Here is the minimal s ...

  10. 浅析ProcessBuilder

    概述 ProcessBuilder类是J2SE 1.5在java.lang中新添加的一个新类,此类用于创建操作系统进程,它提供一种启动和管理进程(也就是应用程序)的方法.在J2SE 1.5之前,都是由 ...