<!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. Red and Black 模板题 /// BFS oj22063

    题目大意: Description There is a rectangular room, covered with square tiles. Each tile is colored eithe ...

  2. Future Parttern 先给你这张提货单

    Future是未来,预期的意思,Thread-permessage模式是指将任务交给其他线程来做,但是如果想知道处理的结果,就要使用Future模式,它的典型应用时执行一个需要花一些时间的方法,会立即 ...

  3. Activiti学习笔记11 — 判断节点的使用

    一. 创建流程 <?xml version="1.0" encoding="UTF-8"?> <definitions xmlns=" ...

  4. shell 脚本999乘法表

    99乘法表 vi st.sh 编辑一个脚本 chmod 777 st.sh 修改权限 注意调整空格,否则打印不出效果 执行脚本   ./st.sh 打印结果

  5. python的异常捕捉

    你可能会说既然有万能异常Exception,那么我直接用上面的这种形式就好了,其他异常可以忽略 你说的没错,但是应该分两种情况去看 1.如果你想要的效果是,无论出现什么异常,我们统一丢弃,或者使用同一 ...

  6. Python自学:第五章 使用range( )创建数字列表

    # -*- coding: GBK -*- number = list(range(1,6)) print(number) 输出为: [1, 2, 3, 4, 5] 2. # -*- coding: ...

  7. 巧用CSS3的calc()宽度计算做响应模式布局

    今天浏览这个http://www.sitepoint.com站时,因为好奇看了下人家写的代码,结果发现了这行代码, 于是就研究了一下,calc()从字面我们可以把他理解为一个函数function.其实 ...

  8. MailHelper

    using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Co ...

  9. docker-compose (单机版的容器编排工具)

    类似于ansible剧本 yml 格式 要使用这个编排工具,必须先安装 yum install -y docker-compose cd wordpress/ vi docker-compose.ym ...

  10. PropertyPlaceholderConfigurer的注意事项

    1.基本的使用方法是<bean id="propertyConfigurerForWZ" class="org.springframework.beans.fact ...