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

VUE获取焦点的更多相关文章

  1. VUe键盘修饰符及自定义指令获取焦点

    首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...

  2. vue自定义指令获取焦点及过滤器修改时间

    <template id="comp3"> <div id="app"> <model :list="selectedl ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  5. vue动态设置Iview的多个Input组件自动获取焦点

    1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...

  6. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

  7. 在Vue中输入框自动获取焦点的三种方式

    原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...

  8. vue 点击按钮 input框架获取焦点的方法

    在按钮事件里加上这一段this.$nextTick(() =>{ this.$refs.input.focus()})

  9. Vue.js—组件快速入门以及实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

随机推荐

  1. 010.Delphi插件之QPlugins，遍历服务接口

    这个DEMO注意是用来看一个DLL所拥有的全部服务接口 演示效果如下 代码如下: unit Frm_Main; interface uses Winapi.Windows, Winapi.Messag ...

  2. 自己写个tween

    public Vector3 begin,end;//起始终止坐标 public float BtoE_time;//用时 float timer,lerp;//计时器和进度值 void Update ...

  3. CentOS7安装Jenkins与配置

    安装 将Jenkins存储库添加到yum repos,并从此安装Jenkins. sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenki ...

  4. day09 Django: 组件cookie session

    day09 Django: 组件cookie session   一.cookie和session都是会话跟踪技术     1.什么是会话             可以理解为客户端和服务端之间的一次会 ...

  5. 2020/2/22 74cms3.5.1 代码审计

    0x00 网站结构 简单试了一下.每一个模块还是比较清楚的,分别对应网站的一个模块.还有一些没有权限访问 0x01 通读代码 先看入口文件,index.php 开头先对网站是否安装做了判断 然后就是判 ...

  6. Shell脚本之awk篇

    目录:一.概述二.awk基本语法格式三.awk基本操作四.awk条件及循环语句五.awk函数六.awk演示示例(源自于man手册) 一.概述 1. 产品概述: awk是一种编程语言,用于在linux/ ...

  7. 一百一十五、脱离SAP本体，通过ActiveX读取SAP表中数据

    一.Sap自带有客户端,但是非常之臃肿卡顿,可以利用ActiveX的方式,脱离Sap本体,来读取Sap表中的内容进行插入等操作,非常之方便.代码如下: 二.界面如下,输入好相关内容,点击登录,提示登录 ...

  8. 114-PHP判断类变量是否相同

    <?php class ren{ //定义人类 } class mao{ //定义人类 } $ren=new ren(); //实例化人类的对象 $ren_a=new ren(); //实例化人 ...

  9. log4j 打印日志

    # Set log levels #     设置日志级别 log4j.rootLogger = INFO, DebugFile,Console, LogFile, ErrorFile ## Disa ...

  10. 13 装备的添加和移除（Unity3D）

    本案例主要实现功能如下:1.创建UI界面,包含两个装备栏,四个武器选择栏以及显示人物的属性的文本框2.每一个装备都有自己的属性(AD/AP/AR/MP)3.人物也有自己的基础属性(AD/AP/AR/M ...