VUE獲取焦點

時間 2020-12-01

標籤 html vue this spa code htm blog utf-8 input 欄目 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。