VUE获取焦点
<!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获取焦点的更多相关文章
- VUe键盘修饰符及自定义指令获取焦点
首先需要在keyup事件之后. 修饰符 来绑定事件 <body> <div class="box"> <!-- 这里的 @keyup.enter=&q ...
- vue自定义指令获取焦点及过滤器修改时间
<template id="comp3"> <div id="app"> <model :list="selectedl ...
- Vue系列之 => 自定义全局指定让文本框自动获取焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue项目中引用element-ui时 让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...
- vue动态设置Iview的多个Input组件自动获取焦点
1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...
- 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...
- 在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...
- vue 点击按钮 input框架获取焦点的方法
在按钮事件里加上这一段this.$nextTick(() =>{ this.$refs.input.focus()})
- Vue.js—组件快速入门以及实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
随机推荐
- Codeforces 1111C Creative Snap分治+贪心
Creative Snap C. Creative Snap time limit per test 1 second memory limit per test 256 megabytes inpu ...
- UVA - 712 S-Trees（S树）
题意:0往左走,1往右走,已知所有叶子的值,每个查询都是根结点到叶子结点的路径,路径的每一个点分别对应着x1,x2,x3……但是实际上的S树的路径可能并非是x1,x2,x3…… 分析:先存路径变量的顺 ...
- 完全卸载(删除)mac下自带的php
/private/etc sudo rm -rf php-fpm.conf.defaultphp.ini php.ini.default /usr/bin sudo rm -rf php php-co ...
- Ubuntu上安装tftp服务
1. 安装 sudo apt install tftpd-hpa 2.设置工作目录 mkdir ~/tftpdroot tftpdroot 3.修改配置文件 sudo vi /etc/default/ ...
- CSS - input 只显示下边框
CSS 样式 : border:none; border-bottom: 1px solid #000
- 7.Python列表
.button, #logout { color: #333; background-color: #fff; border-color: #ccc; } span#login_widget > ...
- 047-PHP数字前面补零，固定位数补0
<?php #PHP 数字前面补零 固定位数补0 $num=128; $num=str_pad($num,8,"0",STR_PAD_LEFT); echo $num; // ...
- 《新标准C++程序设计》4.1（C++学习笔记12）
运算符重载的概念和原理 一.运算符重载的需求 C++预定义的“+.-. * ./.%. ^ .&.~.!.|. = .<< >>.!= ”等运算符,只能用于基本数据类型 ...
- 移动端触屏click点击事件延迟问题，以及tap的解决方案
在移动端 触屏click事件虽然也会响应,但是总感觉是有延迟,一直听说click事件在手机上有200~300毫秒的延迟问题,亲自测了一下,在pc端模拟手机的话是测不出来的,但是用手机测试时发现延迟非常 ...
- Flutter如何引用第三方库并使用
Flutter如何引用第三方库并使用 https://www.jianshu.com/p/bbda7794345e Flutter官网点击访问Flutter教程(一)Flutter概览Flutter教 ...