<!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. emacs 配置文件目录

    在 windows 环境下,emacs 的配置目录可以通过下面几种方式来设置: If the environment variableHOME is set, use the directory it ...

  2. Eclipse新建Maven中创建src文件夹报The folder is already a source folder错误解决办法

    问题: 解决办法:右击项目->Build Path->Configure Build Path选择(missing)文件夹remove,然后重新New Source Folder

  3. mapper语句的一些问题，union连表查询和mapper中根据条件不同采用不同语句的查询问题

    根据业务要求,不同表查出来的内容天需要一起展示出来,并且还有分页之类的,不同表查询字段也不完全相同,这样就有一个问题,不同表如何接合在一起,不同字段怎么办? 这个问题就需要用到union联合查询,并将 ...

  4. python 编写程序输出50以内勾股数，如下图所示，要求每组显示六祖，各组勾股数无重复

    import math n = 0 for a in range(1,49): for b in range(a,49): c = math.ceil(math.sqrt(a**2+b**2)) if ...

  5. Char、float、Double、BigDecimal

    Char初识 char: char类型是一个单一的 16 位 Unicode 字符 char 在java中是2个字节("字节"是byte,"位"是bit ,1 ...

  6. 箭头函数this

    箭头函数的this值是由包含它的函数(非箭头函数)来决定的,与包含的函数的this指向一致,如果包裹它的不是函数(直到找到最外层)则this指向全局对象 并且箭头函数的this是固定的,由定义它时所在 ...

  7. 吴裕雄--天生自然C++语言学习笔记：C++ 命名空间

    假设这样一种情况,当一个班上有两个名叫 Zara 的学生时,为了明确区分它们,在使用名字之外,不得不使用一些额外的信息,比如他们的家庭住址,或者他们父母的名字等等. 同样的情况也出现在 C++ 应用程 ...

  8. Node.js NPM 教程

    NPM是Node.js的包(或模块)管理器,是Node.js应用程序开发的核心. www.npmjs.com上有海量的Node.js包,供免费下载使用. 当安装Node.js时,NPM程序会被同时安装 ...

  9. Bulma CSS - 开始

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 有数种方法可以 ...

  10. zTree的学习

    最近要做一个有关权限的东西,原理和数据库都已经知道了,就是树状图困难. 原先是打算用layui的,因为我孤陋寡闻……吃了大亏,弄了3个小时,屁都没有.只能说是…… 后来百度找到了zTree,进去学习了 ...