Vue系列之 => 自定义全局指定让文本框自动获取焦点

时间：2022-08-28 12:32:39
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="./lib//Vue2.5.17.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

     <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">

 </head>

 <body>

     <div id="app">

         <div class="panel panel-primary">

               <div class="panel-heading">

                     <h3 class="panel-title">Panel title</h3>

               </div>

               <div class="panel-body table-inline">

                     <label for="id">id:

                         <input type="text" class="form-control">

                     </label>

                     <label for="name">name:

                             <input type="text" class="form-control" id="name" v-focus>

                         </label>

               </div>

         </div>

     </div>

     <script>

         //定义全局指定,focus为自定义指令名称，调用时必须加 v-

         Vue.directive("focus",{

             //如果focus绑定到哪个元素，el就代表被绑定的那个元素。

             //注意：在每个函数中，第一个参数，永远是el，el是一个原和一的js对象。

             bind : function(el){ //当指定一绑定到元素上的时候就会立即执行这个bind函数，只触发一次

             },

             inserted : function(el){ //inserted表示元素插入到DOM中的时候，会执行inserted函数，只触发一次

                 el.focus();

             },

             updated : function(){ //当VNode更新的时候会执行updated，可能会触发多次

             }

         })

         var vm = new Vue({

             el : "#app"

         })

     </script>

 </body>

 </html>

Vue系列之 => 自定义全局指定让文本框自动获取焦点的更多相关文章

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

    <body> <div id="app"> <input type="text" value="" id=&q ...

  2. Creating Dialogbased Windows Application &lpar;4&rpar; &sol; 创建基于对话框的Windows应用程序（四）Edit Control、Combo Box的应用、Unicode转ANSI、Open File Dialog、文件读取、可变参数、文本框自动滚动 &sol; VC&plus;&plus;&comma; Windows

    创建基于对话框的Windows应用程序(四)—— Edit Control.Combo Box的应用.Unicode转ANSI.Open File Dialog.文件读取.可变参数.自动滚动 之前的介 ...

  3. JS学习笔记 - 自定义右键菜单、文本框只能输入数字

    <script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...

  4. 使用 jQuery&period;TypeAhead 让文本框自动完成 （四）（自定义模板）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  5. 使用 jQuery&period;TypeAhead 让文本框自动完成 （三）（服务器返回 JSON 复杂对象数组）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  6. 基于JQuery实现的文本框自动填充功能

    1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...

  7. 关于不使用web服务实现文本框自动完成扩展

    来博客园很久了,一直是伸手党,呵呵,现在终于申请了一个账号并开通了博客 下面分享下之前在一个项目里遇到的问题 前段时间在一个项目里要求在文本框内输入要搜索的内容,自动提示与此内容相关的词条 当时在博客 ...

  8. ASP&period;NET输入文本框自动提示功能

    在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...

  9. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

随机推荐

  1. Java NIO与IO的区别和比较

    传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大时,线程所占用的栈内存和CPU线程切换的开销将非常巨大.使用NIO,不再需要为每个线程创建单独的线程,可以用一个含有限数 ...

  2. SPSS数据分析—单因素及多因素方差分析

    t检验可以解决单样本.两个样本时的均值比较问题,但是对于两个以上样本,就不能用t检验了,而要使用方差分析.t检验是借助t分布,方差分析是借助F分布,基于变异分解的思想进行. 在算法上,由于线性模型的引 ...

  3. jstl格式化数字

    jstl中的<fmt:formatNumber>标签   设置显示时间戳<%    request.setAttribute("currentTimeStamp" ...

  4. Reset RequiredFieldValidator 重置 验证控件

    <td style="width:100px;">姓名<span class="must_star">*</span>&lt ...

  5. &period;Net Static 与单例

    Static 关键字作为修饰符可以用于类.方法和成员变量上.其含义是对于整个应用程序生命周期内,访问该修饰符修饰的对象/方法/变量都引用到同一实例(内存地址).但正因如此在多线程下会出现线程安全问题: ...

  6. vs2010开发android的准备工作

    安装 Mono for Android for Visual Studio 2010 需要下面4个步骤: 安装 JDK 安装 Android SDK 配置模拟器 安装 Mono for Android ...

  7. PHP中定义常量的几种方式与区别

    [问]在php中定义常量时,const与define的区别? [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...

  8. C&num;while死循环时候cpu占用比例大

    C#while死循环时候cpu占用比例大 原因:线程等不到释放,windows运行模式是抢占资源 解决方法:休眠一毫秒让垃圾回收可以进来回收资源 while (true) { Thread.Sleep ...

  9. HashTable和HashMap

    参考自: http://blog.csdn.net/tgxblue/article/details/8479147 HashMap和HashTable的异同: 1 HashMap是非线程安全的,Has ...

  10. mysqldump 导出数据库为DBname的表名为Tname的表结构 导出数据库的所有表的表结构

    mysqldump -uroot -p password -d DBname Tname >db.sql #关建点是"-d"参数 导出数据库的所有表的表结构 mysqldum ...

相关文章