首页 > 其他分享 >vue中光标自动显示到指定的input框内

vue中光标自动显示到指定的input框内

时间:2022-11-29 10:44:06浏览次数:43  
标签:vue 指定 框内 input mounted 光标

1、给input加上ref;

1 <v-otp-input
2    ref="inputName"
3    class="opt-input"
4    length="9"
5    type="number"
6    pattern="\d*"
7    v-model="payNum"
8    plain
9   ></v-otp-input>

2、一进来就执行放在mounted里;

1  mounted(){
2     this.$nextTick(() => {
3       this.$refs.inputName.focus();
4     })
5   },

参考文档

https://www.cnblogs.com/clark1990/p/16498108.html

标签:vue,指定,框内,input,mounted,光标
From: https://www.cnblogs.com/tanweiwei/p/16934703.html

相关文章

  • 【Vue】vite + ts 配置别名
    1.vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'function_resolve(dir:string){returnreso......
  • vue3实现搜索高亮
    vue3实现搜索高亮原文:Vue3文本高亮-掘金(juejin.cn)思路将input的文本进行转义处理(eacapeReg函数),v-html就不能相信用户的一切输入,并且需要匹配**.()*****......
  • vue点击其他区域消失
    1.获取dom的id <div id="enterStore" >2.methods写入事件other(){ document.addEventListener("click",(e)=>{    letenterStore=document.getE......
  • vue 中使用 XQJavaScriptFramework
    说明XQJavaScriptFramework隶属于XQFramework下JS基础性框架部分XQFramework励志将开发将常用开发语音基础性框架统一汇总,为全站开发使用到的基础语法进行统一,拜......
  • Vue路由大总结
    vue-routervue-router是vue的一个插件库,专门用来实现SPA应用。SPA单页面Web应用(singlepagewebapplication,SPA)。整个应用只有一个完整的页面。点击页面中......
  • vue运行时报空格等错误
    解决办法   ......
  • Vue2(笔记02) - Vue核心 - 初识Vue
    初识Vue先引入Vue.js;<scriptsrc="./res/vue.js"></script>vue.js 是开发版的vue.js 会有报错提示,比较友好;生产环境中使用vue.min.js准备好一个容器:<divid="root">......
  • Vue模板语法
     Vue模板语法有2大类:          1.插值语法:              功能:用于解析标签体内容。         ......
  • 初识Vue
    初识Vue        1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;        2.root容器里的代码依然符合html规范,只不过混入了......
  • vue3相较于vue2的改动
    v-if和v-for的优先级在vue2中:当v-if和v-for同时使用时,v-for的优先级高于v-if(因此我们通常需要计算属性先对数据进行加工处理,以达到性能优化的目的)在vue3中:当v-if和v-for......