vue @input和@click的區(qū)別及說(shuō)明
更新時(shí)間：2022年10月25日 10:03:35 作者：周家大小姐.
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue @input和@click的區(qū)別
@input 一般用于監(jiān)聽(tīng)事件
只要輸入的值變化了就會(huì)觸發(fā)input
? ?<input?
? ? ? ? :type="type"?
? ? ? ? :value="value"?
? ? ? ? :placeholder="placeholder"?
? ? ? ? :name="name"?
? ? ? ? @input="$emit('input',$event.target.value)"
? ? />@click 事件觸發(fā)事件
<input type="text" @click="clickFn">
vue中input聚焦及坑
點(diǎn)擊按鈕，使某個(gè) input 框聚焦
1、給 input 加個(gè) ref 屬性，寫個(gè) button 按鈕并加個(gè)點(diǎn)擊事件
<input type="text" ref="input"> <button @click="onFocus"></button>
2、onFocus方法：
onFocus() {
? ? this.$refs.input.focus()
? }加載頁(yè)面時(shí)自動(dòng)聚焦
mounted() {
? ? this.$nextTick(() => {
? ? ? this.$refs.input.focus()
? ? })
? },【坑】
如果input框是隱藏的，點(diǎn)擊某個(gè)元素讓input框顯示，同時(shí)聚焦，這個(gè)時(shí)候聚焦效果就不會(huì)實(shí)現(xiàn)。
解決辦法：
點(diǎn)擊元素的時(shí)候用個(gè)變量做標(biāo)識(shí)，然后再watch里面去監(jiān)聽(tīng)這個(gè)變量，通過(guò)判斷這個(gè)變量的值來(lái)聚焦，
可以寫在setTimeout里面，或者寫在nextTick里面即可解決問(wèn)題；代碼如下
watch: {
? ? isClick(){
? ? ? if(this.isClick == false) {
? ? ? ? setTimeout(() => {
? ? ? ? ? this.$refs.input.focus()
? ? ? ? }, 100);
?? ??? ?// this.$nextTick(() => {
? ? ? ? // ? this.$refs.input.focus()
? ? ? ? // });
? ? ? }
? ? }
? }以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vant-list上拉加載onload事件觸發(fā)多次問(wèn)題及解決
這篇文章主要介紹了vant-list上拉加載onload事件觸發(fā)多次問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)購(gòu)物小球拋物線的方法實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue3使用Pinia的store的組件化開(kāi)發(fā)模式詳解
這篇文章主要介紹了vue3使用Pinia的store的組件化開(kāi)發(fā)模式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo
表單校驗(yàn)在日常的開(kāi)發(fā)需求中是一種很常見(jiàn)的需求,通常在提交表單發(fā)起請(qǐng)求前校驗(yàn)用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗(yàn),本文給大家介紹基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo,感興趣的朋友一起看看吧2024-06-06
vue?cli使用iview自定義主題遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了.vue?組件打包成?.js的操作方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
解決Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題
這篇文章主要介紹了Vue3?echarts?v-show無(wú)法重新渲染的問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue3圖片上傳報(bào)錯(cuò)：Required?part?‘file‘?is?not?present.的原因及解決方法
這篇文章主要介紹了Vue3圖片上傳報(bào)錯(cuò)：Required?part?‘file‘?is?not?present.的原因及解決方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家解決問(wèn)題有一定的幫助,需要的朋友可以參考下2024-09-09
本篇文章主要介紹了使用 async-validator 編寫 Form 組件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue移動(dòng)端設(shè)置全屏背景的項(xiàng)目實(shí)踐
本vue移動(dòng)端項(xiàng)目設(shè)置全屏背景,關(guān)鍵是要找對(duì)文件,然后添加background屬性即可,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08