<!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. python+tushare获取A股所有股票代码和名称列表

    接口:stock_basic 描述:获取基础信息数据,包括股票代码.名称.上市日期.退市日期等 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称      |      类型  ...

  2. Deep Dive into Neo4j 3.5 Full Text Search

    In this blog we will go over the Full Text Search capabilities available in the latest major release ...

  3. 在npm中使用bower包依赖工具

    什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...

  4. 编译 GNU binutils

    重新以 arm 用户登陆,让新设置的环境变量起作用. [arm@localhost arm]#su arm [arm@localhost arm]#cd ${SRC} [arm@localhost t ...

  5. JS对象 向下取整floor() floor() 方法可对一个数进行向下取整。 语法: Math.floor(x)

    向下取整floor() floor() 方法可对一个数进行向下取整. 语法: Math.floor(x) 参数说明: 注意:返回的是小于或等于x,并且与 x 最接近的整数. 我们将在不同的数字上使用 ...

  6. leetcood学习笔记-2-两数相加

    题目描述: 方法一: # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self.va ...

  7. QueryList 来做采集

    示例代码 先来感受一下使用 QueryList 来做采集是什么样子. 1 采集百度搜索结果列表的标题和链接.大理石平台价格 采集代码: $data = QueryList::get('https:// ...

  8. LUOGU P2261 [CQOI2007]余数求和(数论分块)

    传送门 解题思路 数论分块,首先将 \(k\%a\) 变成 \(k-a*\left\lfloor\dfrac{k}{a}\right\rfloor\)形式,那么\(\sum\limits_{i=1}^ ...

  9. Taro框架---左滑动删除

    index.js import Taro, { Component } from '@tarojs/taro' import { View,ScrollView } from '@tarojs/com ...

  10. exit与return的区别

    ===========================PHP的解释=========================================================== return ...