<!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的更多相关文章

  1. vue修饰符 .lazy .number .trim

    .lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点 或者 按下回车键时才更新 <template> < ...

  2. 037——VUE中表单控件处理之表单修饰符：lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 表单基本 表单修饰符

    表单的基础 利用v-model进行双向数据绑定: 1.在下拉列表中,将v-model写在select中 2.单选框和复选框需要每个按钮都需要写上v-model 3.v-model在输入框中获取得是输入 ...

  4. Vue表单修饰符（lazy,number,trim）

    lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...

  5. 表单修饰符 number、trim、lazy

    number修饰符 <input type="number" v-model.number="age"> 结论:age 类型则为number,非字符 ...

  6. Vue - 表单修饰符

    .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 . 使用 lazy 修饰符,从而转变为使用 change 事件进行同步 <div id=&qu ...

  7. C语言scanf函数转换说明表及其修饰符表

    1. 对于上一篇文章,总结printf()输出,C库也包含了多个输入函数, scanf()是最常用的一个,也是经常与printf()经常一起搭配使用的函数之一. scanf()和printf()类似, ...

  8. C语言printf函数转换说明表及其修饰符表

    请求printf()函数打印数据的指令要与打印数据的类型匹配. 例如, 打印整数时使用%d, 打印字符是使用%c. 这些符号被称为转换说明, 他们指定了数据转换称可显示的形式. 1. ANSI C标准 ...

  9. 第五节：表单标签的用法——value绑定和修饰符

    1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如:  v-model ...

随机推荐

  1. 15-MySQL-Ubuntu-数据表的查询-聚合函数(四)

    聚合函数 (1)count() 统计总数 查询男性总数 select count(*) as 男性 from students where gender=1; (2)max() 最大值 查询男性中年龄 ...

  2. Android笔记之调用系统相机拍照

    参考链接: 拍照  |  Android Developers, Android相机拍照方向旋转的解决方案:ExifInterface - 简书 Demo链接:https://pan.baidu.co ...

  3. dubbo视频分享

    一.基础篇 第001节--课程介绍 第01节--使用Dubbo对传统工程进行服务化改造的思路介绍 第02节--使用Dubbo对传统工程进行服务化改造 第03节--ZooKeeper注册中心安装 第04 ...

  4. PHP算法之统计全为 1 的正方形子矩阵

    在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积. 示例: 输入: 1 0 1 0 01 0 1 1 11 1 1 1 11 0 0 1 0 输出: 4 来源:力扣( ...

  5. rem换算公式

    当前rem基准值=预设的基准值/设计稿宽度*当前设备的宽度

  6. phonegap 开发指南系列(3) ----在Eclipse中Android开发环境搭建

      前提条件:已在Eclipse中安装好Android SDK 和 ADT. 1.下载PhoneGap,解压. 2.用Eclipse新建一个安卓项目. 3.将phoneGap解压包里的Android文 ...

  7. 如何理解 if __name__ == "__main__"

    小明.py 朋友眼中你是小明(__name__ == '小明'), 你自己眼中你是你自己(__name__ == '__main__'), 你编程很好, 朋友调你去帮他写程序(import 小明, 这 ...

  8. Java 基础 - 装箱， 拆箱

    总结 1-装箱过程是通过调用包装器的valueOf方法实现的,而拆箱过程是通过调用包装器的 xxxValue方法实现的.(xxx代表对应的基本数据类型).例如:在装箱的时候自动调用的是Integer的 ...

  9. 配置文件一spring-mvc.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  10. System.Clollections.IEnumerable.cs

    ylbtech-System.Clollections.IEnumerable.cs 1.程序集 mscorlib, Version=4.0.0.0, Culture=neutral, PublicK ...