VUE獲取焦點

本文轉載自查看原文 2019-09-12 10:30 4556 other

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中控制input獲取焦點 vue全局指令-獲取焦點讓div獲取焦點 vue中，頁面上的input框自動獲取焦點及二次獲取焦點問題 dialog獲取焦點通過ref獲取焦點 ionic獲取焦點 vue 點擊按鈕 input框架獲取焦點的方法 VUE自定義指令獲取焦點 vue進頁面input自動獲取焦點