<!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. 计算机是如何计算的、运行时栈帧分析(神奇i++续)

    关于i++的疑问 通过JVM javap -c 查看字节码执行步骤了解了i++之后,衍生了一个问题: int num1=50; num1++*2执行的是imul(将栈顶两int类型数相乘,结果入栈), ...

  2. Win10下数据增强及标注工具安装

    Win10下数据增强及标注工具安装 一．   数据增强利器—Augmentor 1.安装 只需在控制台输入:pip install Augmentor 2.简介 Augmentor是用于图像增强的软件 ...

  3. 吴裕雄--天生自然java开发常用类库学习笔记：属性类Properties

    import java.util.Properties; public class PropertiesDemo01{ public static void main(String args[]){ ...

  4. (转)Navicat Premium 连接Oracle 数据库（图文教程）

    Navicat premium是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到MySQL.SQLite.Oracle及PostgreSQL 资料库,让管理不同类型 ...

  5. List实体类、DataTable与xml互转

    序列化常用Attribute讲解说明 [XmlRootAttribute("MyCity", Namespace="abc.abc", IsNullable=f ...

  6. you-get加ffmpeg获取视频素材并转格式

    最近做视频,觉得素材不好下载,下载了转格式又很麻烦,终于,在网上ob了很久的我找到了属于自己的工具. you-get视频下载 当你在网上找视频素材的时候发现了一个自己觉得很有意思的视频,但是获取这个视 ...

  7. 给element的confirm加自定义指令

    问题描述,因为自定义指令一般直接加在页面html标签上,但是element封装好的confirm的确认按钮没法添加自定义指令,如图: 解决办法:加个其他的隐藏标签,监听撤销事件,让其他的标签自动触发c ...

  8. 每天一点点之laravel框架开发 - API通过access_token获取用户id报 Unauthenticated. 错误（passport）

    1.首先保证你的config/auth.php 中 guards 的 api 的 driver 选项改为 passport 2.注册中间件,在 app/Http/Kernel.php 文件中的 $ro ...

  9. 业务全都在yun上能放心吗？

    导读 组织将其业务在云上进行“全押”,这与扑克游戏中的这个激动人心时刻有着同样的吸引力.这种举动感觉很大胆,但却向外界传达了自己的信心,表明将会果断行动赢得比赛. 大多数银行对处理零售银行业务方式需要 ...

  10. Day3-T4

    原题目 Describe:有点恶心的DP+最短路 code: #include<bits/stdc++.h> using namespace std; long long A,B,C,z, ...