属性"/>
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中键盘事件和计算属性
发布评论