Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作
oninput 用法
<input type="text" id="myInput" oninput="myFunction()">
<script>
function myFunction() {
}
</script>
oninput 如果需要在Vue中使用則需要寫成 v-on:input 還有綁定id的時(shí)候這樣寫:id="'m_num'+index" 注意m_num必須用單引號(hào)引起來
<input type="number" :id="'m_num'+index" v-on:input="jsMoney(index)">
jsMoney 方法
jsMoney:function(index){
$("#m_num"+index).val()
}
onchange：input 中的文本修改后 在 input 失去焦點(diǎn)后觸發(fā)
onblur：input 失去焦點(diǎn)后直接觸發(fā)
oninput：input 文本輸入時(shí)觸發(fā)
補(bǔ)充知識(shí)：VUE項(xiàng)目中使用this.$forceUpdate();解決頁面v-for中修改item屬性值后頁面v-if不改變的問題
頁面展示：
實(shí)現(xiàn)效果：點(diǎn)擊實(shí)現(xiàn)列表內(nèi)容的展開、折疊。
代碼：
<div class="invoice-list" v-for="(item,index) in invoiceData" :key="index">
<div class="images"><img src="../../../../../static/images/invoice_pu.png" v-if="item.invoiceType == '0'"><img src="../../../../../static/images/invoice_zhuan.png" v-else-if="item.invoiceType == '1'"></div>
<div class="text">
<h3 v-if="item.invoiceType == '0'">增值稅普通發(fā)票</h3>
<h3 v-else-if="item.invoiceType == '1'">增值稅專用發(fā)票</h3>
<p><span>企業(yè)名稱：</span>{{item.enterpriseName}}</p>
<p><span>稅號(hào)：</span>{{item.dutyParagraph}}</p>
<transition name="fade">
<div class="zhuanInfo" v-if="item.mark == true">
<p><span>注冊(cè)地址：</span>{{item.address}}</p>
<p><span>聯(lián)系電話：</span>{{item.contactNumber}}</p>
<p><span>開戶銀行：</span>{{item.accountOpeningBank}}</p>
<p><span>銀行賬號(hào)：</span>{{item.bankAccount }}</p>
</div>
</transition>
<div class="zhuanMark" v-if="item.invoiceType == '1'">
<p class="hideMark">
<img src="../../../../../static/images/arrow_bottom.png" v-if="item.mark == false" @click="clickZhuanMark(index,$event)">
<img src="../../../../../static/images/arrow_top.png" v-else @click="clickZhuanMark(index,$event)">
</p>
</div>
<div class="list-radio"><input type="radio" value="" name="selectContact" @change="getInvoiceId(item.invoiceId)" /></div>
</div>
</div>
v-for渲染出列表，在執(zhí)行列表折疊展開時(shí)"clickZhuanMark" JS如下：
clickZhuanMark(val,event){
this.invoiceData[val].mark = !this.invoiceData[val].mark;
},
可是實(shí)際并沒有如設(shè)想的那樣實(shí)現(xiàn)效果，之后修改代碼：
添加this.$forceUpdate();進(jìn)行強(qiáng)制渲染，效果實(shí)現(xiàn)。搜索資料得出結(jié)果：因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新。
以上這篇Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite引入插件unplugin-auto-import的方法
這篇文章主要介紹了vue3+vite引入插件unplugin-auto-import的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值?,需要的朋友可以參考下2022-10-10
Vue3項(xiàng)目打包后部署到服務(wù)器 請(qǐng)求不到后臺(tái)接口解決方法
在本篇文章里小編給大家整理了關(guān)于Vue3項(xiàng)目打包后部署到服務(wù)器 請(qǐng)求不到后臺(tái)接口解決方法，有需要的朋友們可以參考下。2020-02-02
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-09-09
Vue自定義指令實(shí)現(xiàn)彈窗拖拽四邊拉伸及對(duì)角線拉伸效果
小編最近在做一個(gè)vue前端項(xiàng)目，需要實(shí)現(xiàn)彈窗的拖拽，四邊拉伸及對(duì)角線拉伸，以及彈窗邊界處理功能，本文通過實(shí)例代碼給大家分享我的實(shí)現(xiàn)過程及遇到問題解決方法，感興趣的朋友一起看看吧2021-08-08
npm ERR! code 128的錯(cuò)誤問題解決方法
這篇文章主要介紹了解決npm ERR! code 128的錯(cuò)誤問題,本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue Steps步驟條渲染異常問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
本篇文章主要介紹了Vue插件寫、用詳解（附demo），插件就是指對(duì)Vue的功能的增強(qiáng)或補(bǔ)充。有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了Vue父子組件傳值的一些坑，幫助大家更好的理解和使用vue父子組件，感興趣的朋友可以了解下2020-09-09
Ant?Design?Vue?走馬燈實(shí)現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實(shí)現(xiàn)單頁多張圖片輪播,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03