首页 > 其他 > 详细

页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令

时间:2019-12-08 17:54:57      阅读:124      评论:0      收藏:0      [点我收藏+]
<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,可能会触发多次

 

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

 

页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令

原文:https://www.cnblogs.com/IwishIcould/p/12006378.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!