<!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. 使用R语言 SDK调取tushare数据

    安装Tushare 打开RStudio,在控制台输入命令: > install.packages('Tushare') Tushare的R包需要依赖httr.tidyverse.forecast ...

  2. Spring MVC @RequestMapping注解详解（2）

    @RequestMapping 参数说明 value:定义处理方法的请求的 URL 地址.(重点) method:定义处理方法的 http method 类型,如 GET.POST 等.(重点) pa ...

  3. duboo注解使用详解

    一.背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行. 当越来越的的接口与实现类的增加后,duboo的xml配置会越来越多,为了防止 ...

  4. vue 报错：Cannot read property '__ob__' of undefined

    我的原因:引入组件后未注册 <script> import ComFirst from "../../components/ComFirst.vue" import C ...

  5. java_函数式编程写法

    package cn.aikang.Test; import org.junit.Test; import java.util.Scanner; import java.util.function.S ...

  6. smb中继攻击

    一.NTLM hash 和 Net-NTLM hash 1.客户端向服务器发送一个请求,请求中包含明文的登录用户名.服务器会提前保存登录用户名和对应的密码 hash 2.服务器接收到请求后,生成一个 ...

  7. 用于扩展目标跟踪的笛卡尔B-Spline车辆模型

    (哥廷根大学) 摘要 文章提出了一种表示空间扩展物体轮廓的新方法,该方法适用于采用激光雷达跟踪未知尺寸和方向的车辆.我们在笛卡尔坐标系中使用二次均匀周期的B-Splines直接表示目标的星 - 凸形状 ...

  8. ES5给object扩展的一些静态方法

    1. Object.create(prototype[, descriptors]) : 创建一个新的对象 1). 以指定对象为原型创建新的对象 2). 指定新的属性, 并对属性进行描述 value ...

  9. 校园商铺-4店铺注册功能模块-6店铺注册之Controller层的实现

    1. 从request请求获取获取相关的值 HttpservletRequest request代表的是客户端的请求.当客户端通过http协议访问服务器的时候,http请求头中的所有信息,都封装在这个 ...

  10. spring 家族

    spring家族:spring.springMVC .springBoots springCloud