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