<!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. 7. Reverse Integer(翻转整数)

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  2. [转]Earth Mover's Distance (EMD)

    转自:http://www.sigvc.org/bbs/forum.php?mod=viewthread&tid=981 Earth Mover's Distance (EMD)原文: htt ...

  3. cocos2dx 3.x 精灵重叠时点击最上层的精灵

    ps. 这个方法只适用设置精灵的触摸.. //注册触摸事件..3.X后可以在这样写..不需要重新声明 EventListenerTouchOneByOne *listener = EventListe ...

  4. netbeans许可证模板设置

    工具->模板->设置 user=your name 工具->模板->许可证->默认许可证 <#if licenseFirst??>${licenseFirst ...

  5. JS正则表达式从入门到入土(9)—— test方法以及它的那些坑

    test方法 test方法介绍 RegExp.prototype.test(str) test方法用于测试字符串参数中是否存在匹配正则表达式模式的字符串 test方法的使用 let reg = /\w ...

  6. Camera帧率和AE的关系

    1.camera首先是通过曝光的pixel加上dummy pixel以及曝光的line加上dummy line来决定一帧的曝光时间,这一帧曝光时间的倒数就是帧率,这个没有错吧,但是看代码时候看到pre ...

  7. BIOS/MBR UEFI/GPT关系与区别-资料整理

    ---恢复内容开始--- 关于 BIOS/MBR UEFI/GPT他们之间的关系一直比较疑惑, 首先一点前提 BIOS UEFI 是一类,是控制硬件,引导启动的:MBR GPT是硬盘的分区定义.. 后 ...

  8. 20145322何志威 《Java程序设计》第8周学习总结

    教材学习内容总结 第十四章 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 想要取得channel的 ...

  9. 20145335郝昊《Java程序设计》课程总结

    20145335郝昊<Java程序设计>课程总结 1.读书笔记汇总 第一周学习总结:http://www.cnblogs.com/20145335hh/p/5244638.html 第二周 ...

  10. MR案例:WordCount改写

    请参照wordcount实现一个自己的MapReduce,需求为:     a. 输入文件格式:        xxx,xxx,xxx,xxx,xxx,xxx,xxx     b. 输出文件格式:   ...