• 页面一刷新让文本框自动获取焦点-- 和自定义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>
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    jdk1.8 LongAdder源码学习
    linux 下 vi 文本编辑如何复制一行粘贴删除一行数据
    远程调试
    本机与远程主机指定端口的网络是否连通
    自定义弹窗
    Windows查看占用端口的进程及其对应的应用程序并关闭之
    超实惠:99元阿里云服务器1核2G内存40G硬盘(SSD)
    Java显式锁学习总结之六:Condition源码分析
    Maven使用国内镜像
    深入理解读写锁—ReadWriteLock源码分析
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12006378.html
Copyright © 2020-2023  润新知