表单修饰符.lazy.number.trim
<!DOCTYPE html>
<html lang="zh"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link href="../css/style.css" rel="stylesheet"> </head>
<body>
<div id="myApp">
<h1>用户注册</h1> <div>
<label for="username">用户：</label>
<input type="text" id="username" v-model.lazy="username" @change="checkUsername">
<span v-if="checkUsernameOK">可注册</span>
</div>
<div>
<label for="age">年龄：</label>
<input type="number" id="age" v-model.number="age">
</div>
<div>
<label for="content">个人简介：</label><br/>
<textarea id="content" v-model.trim="content" cols="55" rows="8"></textarea>
</div> <h4>信息区</h4>
<p>{{username}}</p>
<p>{{age}}</p>
<p><pre>{{content}}</pre></p>
</div>
<script>
var myApp = new Vue({
el: '#myApp',
data: {
username: "",
checkUsernameOK: false,
age: "",
content: "",
},
methods: {
checkUsername: function(){
if (this.username.length > 0) this.checkUsernameOK = true;
else this.checkUsernameOK = false;
},
},
});
</script>
</body> </html>
lazy
用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。
用户名：<input v-model.lazy="username">
.number
将用户输入的内容转换为数值类型，如果用户输入非数值的时候，则返回NaN。
年龄：<input v-model.number="age" type="number">
.trim
自动去掉用户输入内容两端的空格。
意见：<input v-model.trim="content">表单修饰符.lazy.number.trim的更多相关文章
- vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...
- 037——VUE中表单控件处理之表单修饰符：lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 表单基本 表单修饰符
表单的基础 利用v-model进行双向数据绑定: 1.在下拉列表中,将v-model写在select中 2.单选框和复选框需要每个按钮都需要写上v-model 3.v-model在输入框中获取得是输入 ...
- Vue表单修饰符（lazy,number,trim）
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...
- 表单修饰符 number、trim、lazy
number修饰符 <input type="number" v-model.number="age"> 结论:age 类型则为number,非字符 ...
- Vue - 表单修饰符
.lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 . 使用 lazy 修饰符,从而转变为使用 change 事件进行同步 <div id=&qu ...
- C语言scanf函数转换说明表及其修饰符表
1. 对于上一篇文章,总结printf()输出,C库也包含了多个输入函数, scanf()是最常用的一个,也是经常与printf()经常一起搭配使用的函数之一. scanf()和printf()类似, ...
- C语言printf函数转换说明表及其修饰符表
请求printf()函数打印数据的指令要与打印数据的类型匹配. 例如, 打印整数时使用%d, 打印字符是使用%c. 这些符号被称为转换说明, 他们指定了数据转换称可显示的形式. 1. ANSI C标准 ...
- 第五节：表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
随机推荐
- Round Numbers /// 组合计数 oj21455
题目大意: 给定a,b 输出[a,b]的闭区间中round number的数量 所谓round就是一个数在二进制下0的个数大于等于1的个数 0的个数>=1的个数 也就是1的个数<=0的个数 ...
- UVA Ananagrams /// map set
https://vjudge.net/problem/UVA-156 题目大意: 输入文本,找出所有满足条件的单词——该单词不能通过字母重排而得到输入的文本中的另外一个单词. 在判断是否满足条件时,字 ...
- redhat7和redhat6混合搭建文档
1.下载cm对应redhat7的版本.2.修改/opt/cloudera/cm-5.10.0/etc/cloudera-scm-agent/config.ini成为中心机器hostname/ip(ma ...
- python3 日志重复打印logger
在python2中正常的日志,单只直接使用python3,发现日志重复了,其实是handlers多添加的原因, python2代码 ---------------------------------- ...
- java 对象转Map方法Demo
/** * 用于对Object进行解析并且转换成Map键值对的形式 * */ public class ObjectUtils { private static final String JAVAP ...
- 数据提取--JSON
什么是数据提取? 简单的来说,数据提取就是从响应中获取我们想要的数据的过程 非结构化的数据:html等 结构化数据:json,xml等 处理方法:正则表达式.xpath 处理方法:转化为python数 ...
- Linux下编译VLC for Android源代码总结
转:http://blog.chinaunix.net/uid-26611383-id-3678766.html 由于项目需要,需要一个在android平台能够支持RTSP协议的播放器,由于之前没有a ...
- Android中visibility属性
Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”.“invisible”.“gone”.主要用来设置控制控件的显示和隐藏. 1) 可见(visi ...
- NYOJ 119 士兵杀敌（三）【ST算法】 分类： Brush Mode 2014-11-13 20:56 101人阅读 评论(0) 收藏
题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=119 解题思路: RMQ算法. 不会的可以去看看我总结的RMQ算法. http://blo ...
- 初识OpenCV-Python - 003:Mouse as a paint-brush
此次学习了如何在OpenCV中使用鼠标事件.主要使用cv2.setMouseCallback()函数来调用鼠标事件. 首先,鼠标有如下事件: >>> import cv2>&g ...