頁面一刷新讓文本框自動獲取焦點-- 和自定義v-focus指令


<body>
    <div id="app">
        <input type="text" value="" id="search">
    </div>
    <script>
        var vm = new Vue({ el: "#app", data: { } }); // 原生自動獲取焦點
        document.getElementById("search").focus(); </script>
</body>

這種方式 雖然可以實現  但是vue不提倡我們dom操作

所以我們自己寫一個v-focus的指令  請看下面

 

自定義v-focus 頁面一刷新就獲取文本 bind inserted 這兩個函數只會執行一次哦, 數據發生改變的時候,updated可能會執行多次哦。
和css樣式有關的操作 放在bind函數中
     和js行為有關的操作  可以寫在inserted()這個函數中去
 
bind:每當指令綁定到元素上的時候,就會立刻執行bind這個函數,
在這三個函數中,第一個參數永遠是el,表示被綁定了指令的那個元素,這個el是一個原生的js對象。

inserted:表示元素插入到DOM中的時候,會執行inserted函數。
updated:當數據跟新的時候,就會執行updated,可能會觸發多次
ps==>但是在element-ui中,你這種你要使用原生的哪一種方式
你使用自定義指令會失去效果 因為el-input是div哦,而不是input

 

<body>
    <div id="app">
        <input type="text" value="" v-focus>
    </div>
    <script> Vue.directive("focus", { bind: function (el) { }, inserted: function (el) { el.focus(); }, updated(el) { //當v-model跟新的時候,就會執行這個函數 這個函數會執行多次 
 }, }) var vm = new Vue({ el: "#app", data: { } }); </script>
</body>

 


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM