created(){
this.changfouce();
},
methods: {
//在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中,
//因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。
changfouce(){
this.$nextTick((x)=>{ //正确写法
this.$refs.inputs.focus();
})
this.$refs.inputs.focus(); //错误写法 },

vue中让input框自动聚焦的更多相关文章

  1. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

  2. vue中的input使用e.target.value赋值的问题

    很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...

  3. VUE DIV模拟input框的基本处理

    关键代码 <div class="dialog-main" :contenteditable= "editable" v-text="notic ...

  4. vue 中 限制 input 输入数字、小数位数等

    限制小数位数 <input type="number" @keydown="handleInput2" placeholder="请输入或查看& ...

  5. Vue中去除文本框回车默认事件

    使用v-on:keydown.enter.prevent即可 <input type="password" class="form-control" id ...

  6. Vue中-下拉框可以选择可以填写

    <el-form-item label="方法名称"> <el-autocomplete popper-class="my-autocomplete&q ...

  7. vue中的select框的值动态绑定

    <--这两种写法效果一样--> 1: <select v-model="wxStatus"> <option label="已添加" ...

  8. vue中的toast组件

    首先在components新建组件文件夹 随后在toast.vue中写入弹框样式 <template> <transition name="demo"> & ...

  9. input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现

    我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么 如果要求input只能输入数字怎么做? 设置type="number" ? 那我如果想限制长度,此 ...

随机推荐

  1. python中getcwd()方法慎用

    比如我们想要获取当前目录的路径,有人可能会用到getcwd()方法,但是会发现这个方法有时候不好用.下面介绍一下,getcwd()方法的具体细节: 1.os.getcwd():获取当前工作目录,也就是 ...

  2. VS2017 配置freeglut3.0.0

    配置freeglut: 1. 先下载cmake和freeglut3.0.0文件,并使用cmake编译freeglut,再使用vs2017生成解决方案,详细步骤见https://blog.csdn.ne ...

  3. Elasticsearch数据迁移工具elasticdump工具

    1. 工具安装 wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64.tar.xz tar xf node-v8.11.2-linux ...

  4. IIS 6的日志time-taken字段没有值的解决方案

    1.IIS 6网站的活动日志格式选择“W3C 扩展日志文件格式”. 2.日志记录属性的高级选项卡,扩展属性列表勾选time-taken.

  5. 企业邮箱绑定微信后,如何设置通过本地验证。(Foxmail)

    老的电脑不行了,换了台暗影精灵3plus顶配,需要把相应的资料移动过来. 然后就发现企业邮箱是绑定了微信的,不能再机器上的Foxmail直接登录,这个问题以前解决过结果自己忘记了,重新解决记录下. 解 ...

  6. nodejs 获取自己的ip

    代码片段 // npm i --save-dev request const request = require('request'); const url = "http://ip.tao ...

  7. ThinkPHP框架 基础 链接数据库

    在第一次成功访问应用入口文件的时候,会显示出一个系统默认的欢迎页面并自动在APPLication文件夹里生成三个文件夹,如下,第一次访问应用文件路径:localhost/tr/index.php   ...

  8. Vue----目录结构

    目录结构: (1):build:---------------------------------------------------------------------------------:保存 ...

  9. Linux关闭IPV6

    Linux关闭IPV6的方法 修改配置文件/etc/sysctl.conf添加以下1行 net.ipv6.conf.all.disable_ipv6 = 1 设置生效 sysctl -p 查看没有IP ...

  10. DB2常用函数详解(一):字符串函数

    VALUE函数 语法:VALUE(EXPRESSION1,EXPRESSION2) VALUE函数是用返回一个非空的值,当其第一个参数非空,直接返回该参数的值,如果第一个参数为空,则返回第一个参数的值 ...