zoukankan      html  css  js  c++  java
  • Vue系列(六)之常用指令v-model

    v-model

        • 基本使用
        • 修饰符
          • .trim
          • .number
          • .lazy

    前面讲到的插值,其实都是单向绑定,数据变——>视图变。有些元素可以与用户交互,比如input,select等,那么我们希望随着用户的交互,对应的数据也发生改变。这样数据变——>视图变,并且视图变——>数据变的绑定就是双向绑定。

    基本使用

    v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。以一个简单的登录demo来说明v-model的使用。
    在这里插入图片描述

    <form @submit.prevent>
       <div>
            <span>用户名</span>
            <input v-model="username">
        </div>
        <div>
            <span>密码</span>
            <input v-model="password">
        </div>
        <input type="submit" value="登录" @click="login">
    </form>
    
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            login(){
                console.log(this.username);
                console.log(this.password);
            }
        }
    });
    

    username,password都是用v-model双向绑定的,随着用户的输入,data中的两个字段也会变化,点击登录按钮时,可以直接获取到用户输入的值。
    在这里插入图片描述

    修饰符

    .trim

    去掉两端的空格

    .number

    自动将用户的输入值转为数值类型

    .lazy

    在默认情况下,v-model 监听input 事件。 lazy 修饰符改为监听 change 事件进行同步数据。

  • 相关阅读:
    Sametime SDK
    final,finally和 finalize的区别
    静态工厂方法
    LinkedTransferQueue原理
    SynchronousQueue和LinkedBlockingQueue区别
    SynchronousQueue中TransferStack原理详解
    SynchronousQueue中TransferQueue原理详解
    jdk Queue
    netty NioEventLoopGroup 分析
    Netty Server 启动时序图
  • 原文地址:https://www.cnblogs.com/childking/p/12197340.html
Copyright © 2011-2022 走看看