vue中键盘事件和计算属性

键盘事件

  • vue中常用的按键别名

  • 回车=>enter

  • 删除=>delete(捕获的删除键和退格键)

  • 退出=> esc

  • 空格 => space

  • 换行 => tab(tab键要和keydown使用,不能与keyup使用,tab键有自身的功能故特殊)

  • 上 =>up

  • 下 => down

  • 左 => left

  • 右 => right

  • 另外的特殊的修饰键(ctrl、alt、shift、meta)

    keyup:按下修饰键的同时,按下其他键,释放其他键,事件才被触发

    keydown使用:正常触发事件

html 复制代码
<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的值被修改

html 复制代码
<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和lastName
              get(){
                 // 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方法时,才能使用计算属性的缩写

复制代码
```html
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
    }
}
```
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试