表单修饰符.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 ...
随机推荐
- HDU 2167 状压dp方格取数
题意:给出一个数表,规定取出一个数后周围的八个数都不可取,求可获得的最大数字和 思路:状态压缩dp,每一行的取数方法为状态,显然,由于取数规则的限制,可取的状态并不是 1<<size_co ...
- linux下使用自带mail发送邮件
linux下使用自带mail发送邮件 mailx工具说明: linux可以通过安装mailx工具,mailx是一个小型的邮件发送程序,一般可以通过该程序在linux系统上,进行监控linux系统状态并 ...
- 001-Java命名规范
1. 包名 多个单词都小写xxxyyyzzz 2.类名和接口名 多单词组成时,所有单词的首字母大写XxxYyyZzz 3.变量名和方法名 多单词组成时,第一个单词首字母小写,后面单词首字母军大写 xx ...
- MySQL 08章_数据库设计
一. 关系模型与对象模型之间的对应关系 序号 关系模型:数据库 对象模型:java程序 1 数据表table 实体entity:特殊的java类 2 字段field 属性attribute/字段fie ...
- 一个好的mvc5+ef6的学习地址
链接地址: MVC5 + EF6 入门完整教程 感谢这位博主的无私奉献 文章目录列表:http://www.cnblogs.com/miro/p/3777960.html#3673688
- Task ProgressBar模拟现实完成后显示TextBox
private async void Form1_Load(object sender, EventArgs e) { progressBar1.Maximum = ; progressBar2.Ma ...
- 单行文本截断 text-overflow
div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- python 基本常用数据类型
#字典类型 result={1:2222,2:2221111}; result.items();#获取字典中所有元素 result.keys();#获取字典的key result.values();# ...
- Windows start
启动一个单独的窗口以运行指定的程序或命令. START ["title"] [/D path] [/I] [/MIN] [/MAX] [/SEPARATE | /SHARED] ...
- MindManager全部快捷键（官方英文文档+中文翻译）
MindManager全部快捷键 [中文翻译版] ------------------------------------------------------------- 导图文件 创建一个新的导图 ...