脚本宝典收集整理的这篇文章主要介绍了Vue官网教程学习过程中值得记录的一些事情，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

html代码如下

<div id="app">
        <label>
            标签名: <input type="text" v-model="content" placeholder="例如：工作，学习">
        </label>
        <button @keyup.enter="addlist">添加标签</button><br>
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id">
               {{index}} {{item.something}} <button @click="remove(index)">删除</button>
            </li>
        </ul>

    </div>

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了

脚本宝典总结

以上是脚本宝典为你收集整理的Vue官网教程学习过程中值得记录的一些事情全部内容，希望文章能够帮你解决Vue官网教程学习过程中值得记录的一些事情所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。