<!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. 048、Java中使用switch判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  2. 0108 spring的申明式事务

    背景 互联网的金融和电商行业,最关注数据库事务. 业务核心 说明 金融行业-金融产品金额 不允许发生错误 电商行业-商品交易金额,商品库存 不允许发生错误 面临的难点: 高并发下保证: 数据一致性,高 ...

  3. 前端性能优化----reflow(回流)和repaint(重绘)

    什么是reflow和repaint(原文链接:http://www.cnblogs.com/Peng2014/p/4687218.html) reflow:例如某个子元素样式发生改变,直接影响到了其父 ...

  4. SSM 整合配置以及一个简单登陆案例（个人记录）

    SSM 文件以及大部分参考博客 https://blog.csdn.net/qq598535550/article/details/51703190 简答的登陆注册案例下载链接在末尾补贴图了 我建立的 ...

  5. Problem I: Ingenious Lottery Tickets

    Problem I: Ingenious Lottery Tickets Your friend Superstitious Stanley is always getting himself int ...

  6. Adapter之ArrayAdapter以及监听器设置

    前言: ArrayAdapter:支持泛型操作,最简单的一个Adapter,只能展现一行文字~,我的学习就是通过这个最简单的适配器开始 正文: 完成这个ArrayAdapter需要三步:1.初始化数据 ...

  7. websocket与http

    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有.所以转到我博客里,分享一下.比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗 ...

  8. [YOLO]《You Only Look Once: Unified, Real-Time Object Detection》笔记

    一.简单介绍 目标检测(Objection Detection)算是计算机视觉任务中比较常见的一个任务,该任务主要是对图像中特定的目标进行定位,通常是由一个矩形框来框出目标. 在深度学习CNN之前,传 ...

  9. 167-PHP 文本分割函数str_split（二）

    <?php $str='PHP is a very good programming language'; //定义一个字符串 $arr=explode(' ',$str,-3); //使用空格 ...

  10. 069-PHP数组下标

    <?php $arr=array(98,'hello',67,'A',85,NULL); //定义一个数组 $x=0; //定义三个作为下标的变量 $y=3; $z=5; echo " ...