<!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. Game of Taking Stones && POJ1259 /// 最大空凸包 几何+DP

    题目大意: 给定n个点 求出这n个点中最大空凸包的面积 只放个模板 一份模板过两题(滑稽 这个讲解够详细了 https://blog.csdn.net/nyroro/article/details/4 ...

  2. split的用法

    split用法返回的是数组 使用split('')根据空格返回数组 使用split()返回一个完整的数组 使用split("",3)返回前三项,是单个的字母 不过要注意: 使用sp ...

  3. openwrt xfrp移植

    对开源软件表示支持 https://github.com/KunTengRom/xfrp 上传编译,选择 cp .config xxx make 刷机 客户端配置文件: /tmp/etc# cat x ...

  4. php多维数组排序方案。按照姓名 首字符 等排序

    //定义一个学生数组   $students = array(     256=>array('name'=>'jon','grade'=>98.5),     2=>arra ...

  5. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  6. Java导出pdf文件数据

    提示:导出pdf文件,需要3个jar包iText-2.1.5.jar,iTextAsian.jar,iText-rtf-2.1.4.jar. public boolean outputPdfJhsy( ...

  7. Jmeter接口自动化测试：简单使用步骤

    好处:不需要页面就可以提前介入测试,实施成本低,修改量少,相对于UI自动化来说更为稳定 1. 下载略过 2. 使用步骤 创建线程组合控制器(Jmeter基本操作) 针对http协议的接口增加Sampl ...

  8. RocketMQ源码分析之从官方示例窥探：RocketMQ事务消息实现基本思想

    摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...

  9. thinkphp 输入变量

    在Web开发过程中,我们经常需要获取系统变量或者用户提交的数据,这些变量数据错综复杂,而且一不小心就容易引起安全隐患,但是如果利用好ThinkPHP提供的变量获取功能,就可以轻松的获取和驾驭变量了. ...

  10. .net core, docker 在vs2019开发过程中的问题以及解决办法

    .net core, docker 在vs2019开发过程中的问题以及解决办法 记录下来,帮助Ta人~ 1.vs调试,快Build完后提示Docker 端口:xxxx,xxxx,xxxx占用 解决办法 ...