第六十二篇：Vue的双向绑定与按键修饰符
好家伙，依旧是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的双向绑定与按键修饰符的更多相关文章
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue.js（13）--按键修饰符
v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...
- vue学习 `${HH}-${mm}-${dd}` 按键修饰符
vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...
- 第六十二篇、AFN3.0封装网络请求框架，支持缓存
1.网络请求 第一种实现方式: 功能:GET POST 请求 缓存逻辑: 1.是否要刷新本地缓存,不需要就直接发起无缓存的网络请求,否则直接读取本地数据 2.需要刷新本地缓存,先读取本地数据,有就返回 ...
- 第三十二篇:vue的响应式原理
好家伙 什么是响应式?比较官方的回答: Vue.js 的核心包括一套"响应式系统". "响应式",是指当数据改变后,Vue 会通知到使用该数据的代码. 例如,视 ...
- Vue学习之路第十九篇：按键修饰符的使用
1.我们工作中经常会有类似于这样的需求:按下Enter键触发某个事件.或者按下ESC退出页面等各种各样的场景.在Vue中,可以通过键盘修饰符来实现这样的场景. 2.事例代码: <body> ...
- Spring Cloud第十二篇 | 消息总线Bus
本文是Spring Cloud专栏的第十二篇文章,了解前十一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...
- 解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持（译）
解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...
随机推荐
- 27.MySQL 索引、事务与存储引擎
MySQL 索引.事务与存储引擎 目录 MySQL 索引.事务与存储引擎 MySQL 索引 索引的概念 索引的作用及副作用 索引的作用 索引的副作用 创建索引的原则依据 索引的分类和创建 普通索引 唯 ...
- vue大型电商项目尚品汇（后台篇）day05
今天继续是对后台管理部分的一个操作,但是快要结束了,今天结束,明天会进入一个从Vue以来,另外一个名声显著的东西了,一只耳闻从未见识,而且十分的炫酷 他就是------数据可视化Echarts,迫不及 ...
- Vue MD5加密你用吗?
安装 npm install --save js-md5 1.按需引入(在你需要的项目中引入) 引入: import md5 from 'js-md5' 使用: md5('加密信息') 2.全局引入( ...
- python基础知识-day7(文件操作)
1.文件IO操作: 1)操作文件使用的函数是open() 2)操作文件的模式: a.r:读取文件 b.w:往文件里边写内容(先删除文件里边已有的内容) c.a:是追加(在文件基础上写入新的内容) d. ...
- React技巧之导入组件
正文从这开始~ 总览 在React中,从其他文件中导入组件: 从A文件中导出组件.比如说,export function Button() {} . 在B文件中导入组件.比如说,import {But ...
- Codeforces Round #789 (Div. 2) A-C
Codeforces Round #789 (Div. 2) A-C A 题目 https://codeforces.com/problemset/problem/1677/A 题解 思路 知识点:模 ...
- 30m精度土壤类型、土壤质地、土壤有机质、土壤PH、土壤氮磷钾
数据下载链接:数据下载链接 引言 全国土壤类型.质地.养分及变化等信息产品分为土壤类型数据.土壤质地数据.土壤养分数据及土壤变化数据等.该类产品是基于野外调查和实地采样,结合历史数据,建立全国土壤类 ...
- OneOS家族，LITE版小兄弟诞生了！
号外,号外!OneOS-Lite诞生啦!前有大哥OneOS,以及一众优秀的RTOS,正所谓珠玉在前,我很难啊.但我可不能怂,大哥叫小O,我就叫小L,站在大哥的肩上,小小L也有发光发热的机会. 小L代码 ...
- BZOJ1874 「一本通 6.7 练习 1」【一本通提高博弈论】取石子游戏
「一本通 6.7 练习 1」取石子游戏 题目描述 小H和小Z正在玩一个取石子游戏. 取石子游戏的规则是这样的,每个人每次可以从一堆石子中取出若干个石子,每次取石子的个数有限制,谁不能取石子时就会输掉游 ...
- 在.NET 6.0中配置WebHostBuilder
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在阅读第4章"使用Kestrel配置和定制HTTPS"时,您可 ...