VUE获取焦点

最新推荐文章于 2025-03-04 14:30:05 发布

weixin_30239339

最新推荐文章于 2025-03-04 14:30:05 发布

阅读量664

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/linfenghp/p/11510549.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>待办列表</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="todolistHome">
        <div>
            //获取焦点主要就是定义一个ref
            <input v-model="inputvalue"  ref="inputVal"/>
            <button @click="addItem">提交</button>
        </div>
        <ul>
            <ul>
                <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>
        </ul>
        </div>
        <script>
            var todolistApp = new Vue({
                el:'#todolistHome',
                data:{
                    inputvalue:"",
                    list:[],
                    picFocusStatus:true
                },
                methods:{
                    addItem:function(){
                        this.list.push(this.inputvalue);
                        this.inputvalue = "";    
                        //然后调用focus方法
                        this.$nextTick(()=>{
                            this.$refs.inputVal.focus()
                        })
                    }
                }
            })
        </script>
    </body>
</html>