表单修饰符.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 ...
随机推荐
- 使用python和tushare股票交易日历数据，判断节假日周末休市
接口:trade_cal 描述:获取各大交易所交易日历数据,默认提取的是上交所 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称 | 类型 ...
- VB.NET利用正則表達式巧妙限制字符输入
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010028869/article/details/37913867 在通常的程序设计中.对 ...
- springboot中参数校验
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
- Linux（Centos7）安装ngnix服务器
Ngnix服务器是一款优秀的静态页服务器软件和反向代理服务器软件 目前,centos安装ngnix可以yum安装也可以下载安装,我们为了扩展方便,选择下载安装.yum一键安装没什么好说的. 一.安装编 ...
- windows 嵌入控制台
{ 实际非常简单 需要控制台的hwnd 和 hdc 能获取控制台的hwnd 那hdc 就出来了 有了hdc 还有什么不能干的呢?? 如果会win32 窗口编程的就知道hdc,是一个让人流口水的类型 } ...
- thinkphp 定界符
模板文件可以包含普通模板标签和XML模板标签,标签的定界符都可以重新配置. 大理石平台厂家 普通标签 内置模板引擎的普通模板标签默认以{ 和 } 作为开始和结束标识,并且在开始标记紧跟标签的定义,如果 ...
- 带撤销贪心——cf1148F好题
自己不会做,看了题解懂得 从最高位依次往低位遍历,因为偶数个1是不改变符号的,所以带个贪心即可(可以看成是带撤销的..) 每轮循环用sum记录该位选择1可以减少的值 如果是负数,就不要改成1 如果是正 ...
- C++——多态
1. 多态定义的构成条件 多态是在不同继承关系的类对象,去调同一函数,产生了不同的行为. 就是说,有一对继承关系的两个类,这两个类里面都有一个函数且名字.参数.返回值均相同,然后我们通过调用函数来实现 ...
- 数组那些事（slice,splice,forEach,map,filter等等）
周五,再过会要下班了,刚才把<javascript高级程序设计>数组这块又看了下,加深下记忆.今天来继续练练笔,嘿嘿!(写下自己印象不深的东西) 一.数组的定义(数组定义分为两种) 方法一 ...
- python列表的常用操作
列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型.比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各种数据类型: 列表是p ...