<!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. 你从未见过的Case Study写作指南

    Case Study,意为案例分析,Case Study与其它的留学论文作业最大的的差别就在于Case Study在论文开始就需要明确给出论,然后再阐述这个结论的论证依据和理由.留学生们需要知道的是C ...

  2. 使用conda创建虚拟环境

    conda创建python虚拟环境 前言 conda常用的命令: conda list 查看安装了哪些包. conda env list 或 conda info -e 查看当前存在哪些虚拟环境 co ...

  3. 吴裕雄--天生自然java开发常用类库学习笔记：Set接口

    import java.util.HashSet ; import java.util.Set ; public class HashSetDemo01{ public static void mai ...

  4. python爬虫笔记01

    1.urllib库中request,parse的学习 1.1 简单的请求页面获取,并下载到本地 request的使用 from urllib import request # 获取此网页的demout ...

  5. CheckBox标签和属性

    CheckBox的作用:可以提供复选 下面是我点击按钮查看所选内容的代码:定义按钮监听器,并在onClick方法中调用shoeAlt方法(此方法会在第二块代码定义) Button btn=(Butto ...

  6. OpenMandriva或将放弃32位的支持

    导读 除了Ubuntu计划在其19.10发行版中删除32位包之外,OpenMandriva开发团队也是另一个备受关注的Linux发行版起草计划,以取消对32位包的支持. OpenMandriva计划在 ...

  7. 微信小程序如何刷新当前界面

    在微信小程序开发的过程中,在一个页面中对数据操作之后我们大多数时间都需要刷新一下当前界面以把操作之后的结果显示出来,但是如何在执行操作后进行本页面的刷新就成了一个问题很大但是很需要的操作.下面介绍一下 ...

  8. 吴裕雄--天生自然C++语言学习笔记：C++ 预处理器

    预处理器是一些指令,指示编译器在实际编译之前所需完成的预处理. 所有的预处理器指令都是以井号(#)开头,只有空格字符可以出现在预处理指令之前.预处理指令不是 C++ 语句,所以它们不会以分号(;)结尾 ...

  9. 第二十一篇 关联管理器(RelatedManager)

    关联管理器(RelatedManager) lass RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器.它存在于下面两种情况: Forei ...

  10. 用cat写入

    $ cat >> gzip_work.sh <<EOF > mkdir gzip/workshell > EOF