Vue input 框 删除输入内容 自动获取焦点
复制代码
1
2
3
4
5
6<template> <input ref='id' v-model="msg" id="searchMT" placeholder="输入汉字搜索..." > <div @click="deleteci">删除</div> </template>
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29export default { data() { return { msg:'', } }, methods: { deleteci(){ let name= $('#searchMT').val() let strs=name.replace(/(^s+)|bai(s+$)/g, "");//去除前后的du空格 var strng = strs.substr(0,strs.length-1) //console.log(strng); this.msg = strng; this.changfouce(); }, //自动获取焦点 changfouce(){ this.$nextTick((x)=>{ //正确写法 this.$refs.id.focus(); }) } }, created(){ //自动获取焦点 this.changfouce(); }, }
这是进入页面input自动获取焦点，手动点击删除input里面的内容，因为在删除的时候焦点会失去所以在删除的函数里面重新调用一下获取焦点的函数就可以实现手动点击删除而失去焦点！配合上vue的v-model来给内容框重新赋值。就可以实现实时改变内容。
最后
以上就是野性荔枝最近收集整理的关于Vue 截取字符串与input 自动获取焦点！的全部内容，更多相关Vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复