好家伙，依旧是vue的基础

1.按键修饰符

假设我们在一个<input>框中输入了12345,我们希望按一下"Esc"

然后删除所有前面输入的内容,这时候,我们会用到按键修饰符,

在监听键盘事件时，我们经常需要判断详细的按键。

此时，可以为键盘相关的事件添加按键修饰符，例如：

1.1.基本使用方法

<input type="text" @keyup.esc="clearInput" @keyup.enter="log"> </input>

//key为"esc"时调用clearInput方法,

//key为"Enter"时调用log方法

添加方法配置:

　　　　methods:{

                clearInput(e){

                    console.log('clearInput方法被触发')

                    e.target.value =''

                },

                log(){

                    console.log('log方法被触发')

                }

             }

按下"Esc"

可行,

2.数据的双向绑定v-model

vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单数据

2.1.基本使用方法

<body>

    <div id="app">

       <P>第一个框</P>

       <input type="text" v-model="username">

       <p>第二个框</p>

       <input type="text" :value="username">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>

        const vm = new Vue({

            el:'#app',

            data:{

                count:1,

                username:'zhangsan',

            },

            methods:{

             }

        })

    </script>

</body>

可以看见其将数据绑定到了input框中

2.2.v-model和v-bind的区别(为什么是双向绑定?)

我们分别来尝试修改第一个<input>和第二个<input>中的数值

先改第一个框

可以看见第二个框的数值也随之改变

再来改第二个

对第二个框的数值进行更改,第一个框的数值不再改变

这也就是双向绑定了,v-model使input框的值与"username"双向绑定 将(view)与(model)绑定起来

　　　　　　　　　  其中一个改变,另一个也随之改变

　　　　　　　　　  而v-bind仅仅是单向绑定,视图的改变不会使数据发生改变,

　　　　　　　　　  但数据的改变会使视图发生变化

3.v-model的修饰符

v—model 指令的修饰符

为了方便对用户输入的内容进行处理，vue为v—model指令提供了3个修饰符，分别是：

修饰符       作用 　　　　                                      示例

.number    自动将用户的输入值转为数值类型       <input v-model.number="age" />

.trim          自动过用户输入的首尾空白字符           <input v-model.trim="msg' />

.lazy          在"change"时而非 "input"时更新          <input v-model.lazy="msg" />

举个栗子:

<body>

    <div id="app">

       <P>第一个框</P>

       <input type="text" v-model.number="count1">+<input type="text" v-model.number="count2"> =<span>{{count1+count2}}</span>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>

        const vm = new Vue({

            el:'#app',

            data:{

                count1:11,

                count2:22,

                username:'zhangsan',

            },

            methods:{

             }

        })

    </script>

</body>

效果如下

若果不使用.number,就会

That's all.

第六十二篇：Vue的双向绑定与按键修饰符的更多相关文章

  1. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  2. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. vue.js（13）--按键修饰符

    v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...

  4. vue学习 `${HH}-${mm}-${dd}` 按键修饰符

    vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...

  5. 第六十二篇、AFN3.0封装网络请求框架，支持缓存

    1.网络请求 第一种实现方式: 功能:GET POST 请求 缓存逻辑: 1.是否要刷新本地缓存,不需要就直接发起无缓存的网络请求,否则直接读取本地数据 2.需要刷新本地缓存,先读取本地数据,有就返回 ...

  6. 第三十二篇:vue的响应式原理

    好家伙 什么是响应式?比较官方的回答: Vue.js 的核心包括一套"响应式系统". "响应式",是指当数据改变后,Vue 会通知到使用该数据的代码. 例如,视 ...

  7. Vue学习之路第十九篇：按键修饰符的使用

    1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...

  8. Spring Cloud第十二篇 | 消息总线Bus

    ​ ​本文是Spring Cloud专栏的第十二篇文章,了解前十一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...

  9. 解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持（译）

    解剖SQLSERVER 第十二篇   OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...

随机推荐

  1. Spring Boot 实践 ：Spring Boot + MyBatis

    Spring Boot 实践系列,Spring Boot + MyBatis . 目的 将 MyBatis 与 Spring Boot 应用程序一起使用来访问数据库. 本次使用的Library spr ...

  2. arcgis创建postgre企业级数据库

    什么是企业级地理数据库? 企业级地理数据库(ArcSD Enterprise,sde)是和 arcGIS 套件集成程度最高的地理数据库:创建时需要用到安装 arcGIS Server 时的 [ecp ...

  3. python 常用的数据类型

    常用的数据类型 整数型 -> int 可以表示正数.负数.0 整数的不同进制的表示方法 十进制->默认的进制,无需特殊表示 二进制->以0b开头 八进制->以0o开头 十六进制 ...

  4. sql server2016 数据库日志 清空语句

    /*1.查询数据库日志文件名称*/--TC_MES_DEV为数据库名--这里的 数据库日志名,可以用以下注释的语句进行查询(_log那个)USE [TC_MES_DEV]GOSELECT file_i ...

  5. NC25025 [USACO 2007 Nov G]Sunscreen

    NC25025 [USACO 2007 Nov G]Sunscreen 题目 题目描述 To avoid unsightly burns while tanning, each of the \(C\ ...

  6. Linux系列之查找命令

    前言 Linux 有四个常用的查找命令:locate.whereis.which 和 find.本文介绍它们的区别和简单用法. locate命令 这个命令将检查你的整个文件系统,并找到该关键词的每一次 ...

  7. StringBuilder的构造方法和append方法

    Java中StringBuilder的构造方法 StringBuilder构造方法: public StringBuilder(): 创建一个空白可变的字符串对象,不含有任何内容 public Str ...

  8. Spring学习笔记（4）Spring 事件原理及其应用

    在 JDK 中已经提供相应的自定义事件发布功能的基础类: java.util.EventObject类 :自定义事件类型 java.util.EventListener接口:事件的监听器 首先了解几个 ...

  9. centos一些mysql常用命令

    # service mysqld status    #命令来查看mysql 的启动状态,active (running) 是运行中 systemctl start mysqld.service    ...

  10. World Tour Finals 2019 D - Distinct Boxes 题解

    太神了,专门写一篇题解 qwq 简要题意:给你 \(R\) 个红球和 \(B\) 个蓝球,你要把它们放到 \(K\) 个箱子里,要求没有两个箱子完全相同(即两种球个数就相同),求 \(K\) 的最大值 ...