詳解.vue文件中監(jiān)聽(tīng)input輸入事件（oninput）
更新時(shí)間：2017年09月19日 09:14:39 作者：小禾子_Jane
本篇文章主要介紹了詳解.vue文件中監(jiān)聽(tīng)input輸入事件（oninput），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
.vue文件其實(shí)是一個(gè)組件，關(guān)于它的說(shuō)明我之前也寫(xiě)過(guò)一篇文章，地址：.vue文件，今天這篇文章要講的是.vue文件中監(jiān)聽(tīng)input的輸入值變化事件。需求是這頁(yè)面中，改變input的值，就調(diào)用一個(gè)事件，第一想到的是oninput。
oninput 事件在用戶(hù)輸入時(shí)觸發(fā)，菜鳥(niǎo)教程中的用法是：
但是在.vue中這樣寫(xiě)是沒(méi)有作用的：
<input type="text" id="cardsNum2" value="1" @oninput ="inputFunc">
這樣寫(xiě)也沒(méi)有作用：
<input type="text" id="cardsNum2" value="1" v-on:oninput ="inputFunc">
最后，這樣寫(xiě)才起作用：
<input type="text" id="cardsNum2" value="1" v-on:input ="inputFunc">
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)記錄
這篇文章主要介紹了微信小程序Webview與H5通信的思路與實(shí)戰(zhàn)的相關(guān)資料,由于微信小程序與H5之間的通信限制,無(wú)法滿(mǎn)足業(yè)務(wù)需求,通過(guò)動(dòng)態(tài)改變url的hash值來(lái)傳遞參數(shù),并利用vue-router組件的路由守衛(wèi)來(lái)避免頁(yè)面刷新,需要的朋友可以參考下2025-01-01
解決vue中監(jiān)聽(tīng)input只能輸入數(shù)字及英文或者其他情況的問(wèn)題
今天小編就為大家分享一篇解決vue中監(jiān)聽(tīng)input只能輸入數(shù)字及英文或者其他情況的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)CLI 3.0 + momentjs + lodash打包時(shí)優(yōu)化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
在Vue實(shí)例上掛載自己定義的工具類(lèi)的操作方法
在實(shí)際的Vue開(kāi)發(fā)中,我們經(jīng)常需要在多個(gè)組件之間共享一些工具函數(shù)或類(lèi),比如格式化日期、處理字符串、操作數(shù)組等,本文將詳細(xì)介紹如何在Vue實(shí)例上掛載自己定義的工具類(lèi),并在項(xiàng)目中高效使用這些工具,需要的朋友可以參考下2024-09-09
Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)
本文主要介紹了Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解
這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個(gè)基于Typescript開(kāi)發(fā)的針對(duì)Vue3開(kāi)發(fā)的UI組件庫(kù),由TuSimple(圖森未來(lái))公司開(kāi)發(fā)并開(kāi)源,需要的朋友可以參考下2023-08-08
使用Vue3和Echarts?5繪制帶有立體感流線(xiàn)中國(guó)地圖(推薦收藏!)
最近接到一個(gè)需求是做一個(gè)中國(guó)地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線(xiàn)中國(guó)地圖的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue使用Element el-upload 組件的相關(guān)知識(shí)，在研究學(xué)習(xí)基本使用的過(guò)程中遇到很多問(wèn)題，今天特此把問(wèn)題記錄分享到腳本之家平臺(tái),需要的朋友可以參考下2021-09-09