属性"/>
vue中键盘事件和计算属性
键盘事件
-
vue中常用的按键别名
-
回车=>enter
-
删除=>delete(捕获的删除键和退格键)
-
退出=> esc
-
空格 => space
-
换行 => tab(tab键要和keydown使用,不能与keyup使用,tab键有自身的功能故特殊)
-
上 =>up
-
下 => down
-
左 => left
-
右 => right
-
另外的特殊的修饰键(ctrl、alt、shift、meta)
keyup:按下修饰键的同时,按下其他键,释放其他键,事件才被触发
keydown使用:正常触发事件
-
<body><div>//keyup.enter是按下回车在控制台才输出结果<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></div> </body> <script>new Vue({el:'#root',data: {name: '时空'},methods: {showInfo(e) {//13是回车键的编码,e代表event//if(e.keyCode != 13)//return console.log(e.target.value)//查询按键的编码console.log(e.keyCode)//按下回车将输入框的数据进行输出console.log(e.target.value) }}}) </script>
计算属性
-
computed计算属性和methods的区别
计算属性在调用多个fullName时,get只执行一次,剩下的多次fullName是从缓存中获取
methods调用一次,方法实现一次。没有缓存
-
如果修改缓存中的值,但缓存仍在存在。也就是缓存中的值和想修改的值不一致。针对此类问题引出,get的调用时机,
1.初读取fullName时,get被调用
2.所依赖的数据发生改变,也就是firsName和lastName的值被修改
-
<body><div>姓: <input type="text" v-model="firsName"><br/>名:<input type="text" v-model="lastName"><br/>全名: <span>{{fullName}}</span>// <span>{{fullName}}</span>// <span>{{fullName}}</span>// <span>{{fullName}}</span></div> </body> <script>const vm = new Vue({el: '#app',data:{firsName: '张',lastName: '三',},computed: {fullName: {//当获取fullName时,在计算属性中访问data的firsName和lastName,get方法会被调用。fullName和data的属性都可以在vm中找到。故用this。获取firsName和lastNameget(){// console.log('get',this)return this.firsName + '-' + this.lastName}//set方法当fullName被修改的时候被调用set(value){// console.log('set',value)//split方法把要修改的值,拆分成数组const arr = value.split('-')this.firName = arr[0]this.lastName = arr[1]}}}}) </script>
计算属性的缩写
-
只有当不需要set方法时,才能使用计算属性的缩写
-
computed: {fullName: {get(){return this.firsName + '-' + this.lastName}} //演变一 computed: {//function(){}看成时get方法fullName: function(){return this.firsName + '-' + this.lastName} } //演变二 computed: {//这里不是函数模板的{{}}里面不能写fullNaLL()fullName(){return this.firsName + '-' + this.lastName} }
-
更多推荐
vue中键盘事件和计算属性
发布评论