资讯专栏INFORMATION COLUMN

Vue官网教程学习过程中值得记录的一些事情

flyer_dev / 3045人阅读

摘要:今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图代码如下标签名例如工作,学习添加标签删除代码如下赵喜娜其中,官网上讲到了一个按键修饰符在监听键盘事件时,我们经常需要检查常见的键值。

今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图

html代码如下


  • {{index}} {{item.something}}

js代码如下

var app = new Vue({
        el:"#app",
        data(){
            return{
                content:"",
                datalist:[
                    {id:0,something:"赵喜娜"},
                    {id:1,something:"Jhon Sena"},
                    {id:2,something:"visual studio code"},
                ],
                nextId:3,
            }
        },
        methods:{
            addlist(){
                this.datalist.push(
                    {id:this.nextId++,something:this.content}
                )
                this.content=""
            },
            remove(index){
                this.datalist.splice(index,1)
                console.log(index)
            }
        },
        created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },
    })

其中,官网上讲到了一个按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

我在代码里加上了@keyup.enter 然而,按回车键并没有什么用,要先获得一次焦点以后才能够按键触发,当然也百度到了解决办法,办法就是在created里面添加一个键盘事件

    created() {
            var lett=this;
            document.onkeydown=function(e){
                var key=window.event.keyCode;
                if(key==13){
                  lett.addlist();
                }
            }
        },

就ok了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99793.html

相关文章

  • Vue官网教程学习过程中值记录一些事情

    摘要:今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图代码如下标签名例如工作,学习添加标签删除代码如下赵喜娜其中,官网上讲到了一个按键修饰符在监听键盘事件时,我们经常需要检查常见的键值。 今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图showImg(https://segmentfault.com/img/bVbkJ3w?w=328&h=134); html代码如下...

    lowett 评论0 收藏0
  • Vue官网教程学习过程中值记录一些事情

    摘要:今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图代码如下标签名例如工作,学习添加标签删除代码如下赵喜娜其中,官网上讲到了一个按键修饰符在监听键盘事件时,我们经常需要检查常见的键值。 今天在官网上学习过程中看到了一个挺有趣的东西,具体效果如下图showImg(https://segmentfault.com/img/bVbkJ3w?w=328&h=134); html代码如下...

    luxixing 评论0 收藏0
  • B站Up主-山地人-这位老哥2019年前端自学计划进展如何?——讲一个B站Up主自学前端85天

    摘要:前言自从上次在掘金发布年山地人的前端完整自学计划讲一个站主山地人的天前端自学故事以来,一眨眼山地人老哥在站做主已经有天了。所以这个体系里的一些框架包括也是山地人年自学计划的一部分。月底,山地人老哥开启了的两个专题。 前言 自从上次在掘金发布【2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事】 以来,一眨眼山地人老哥在B站做Up主已经有85天了。 时隔一个...

    cocopeak 评论0 收藏0

发表评论

0条评论

flyer_dev

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<