<!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. $digest / $apply digest in progress报错

    有的时候出于某种原因,如jq操作了model.或者$watch.setTimeout等函数改变了model,导致最后没有脏数据检测.所以我没就手动调用了$apply( )等.但是第一次运行的时候ang ...

  2. fir.im 测试包下载工具--FIRReader 的图文介绍

    fir.im 是一个供开发者上传测试包(也可以是企业的正式包)的网站.该网站提供了接口访问应用资源.下面要介绍的这个应用对接了这些接口,供用户方便下载应用. 先来看下应用截图吧! 主要有以下功能点:1 ...

  3. XPath Checker 和 firebug 插件使用

    安装插件: 1.firebug 2.FirePath 3.xpath finder 4.XPath Checker XPath Checker 下载安装 https://addons.mozilla. ...

  4. netty9---使用编码解码器

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  5. 关于URL和http协议，http消息格式

    转自:http://crystal2012.iteye.com/blog/1447845 在WWW(全球资讯网)中想要连结到某个网页,便需要给浏览器一个位址,而URL在此的功能就是告知浏览器某个资源在 ...

  6. [CLR via C#读后整理]-1.CLR的执行模型

    公共语言运行时(Common Language Runtime,CLR)是一个可由多种编程语言使用的"运行时".他主要提供的功能有:程序集加载,内存管理,,安全性,异常处理,线程同 ...

  7. 20145211《网络渗透》msf辅助模块的应用

    20145211<网络渗透>msf辅助模块的应用 一.实验准备 启用VB的kali,需要用到桥接,VMware桥接总是罢工…… 二.实验步骤 最好开桥接模式,要不然你就多开几个虚拟机(只要 ...

  8. 学Git，用Git ①

    本月开始接触到Git版本管理工具,觉得很有意思,在这里总结一下学习Git的一些心得体会. 要在Mac上完整的使用git进行版本管理,需要熟悉Mac终端操作命令和Git操作命令两种命令,索性两种命令加在 ...

  9. js中比较实用的函数用法

    <table id="table"> <tr> <th>用户ID</th> <th>用户名</th> < ...

  10. 北京联通光猫 F427 路由改桥接的方法

    最近安装了一个联通的宽带,赠送的光猫是 中兴 F427,然后联通小哥给安装的时候,直接开启了光猫的路由功能. 不过联通这个光猫实在是太弱了,起码默认的帐号开启的功能实在是太弱了,没法完成以下几个功能: ...