Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作
oninput 用法
<input type="text" id="myInput" oninput="myFunction()">
<script>
function myFunction() {
}
</script>
oninput 如果需要在Vue中使用則需要寫(xiě)成 v-on:input 還有綁定id的時(shí)候這樣寫(xiě):id="'m_num'+index" 注意m_num必須用單引號(hào)引起來(lái)
<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();解決頁(yè)面v-for中修改item屬性值后頁(yè)面v-if不改變的問(wèn)題
頁(yè)面展示：
實(shí)現(xiàn)效果：點(diǎn)擊實(shí)現(xiàn)列表內(nèi)容的展開(kā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'">增值稅專(zhuān)用發(fā)票</h3>
<p><span>企業(yè)名稱(chēng)：</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>開(kāi)戶銀行：</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í)行列表折疊展開(kāi)時(shí)"clickZhuanMark" JS如下：
clickZhuanMark(val,event){
this.invoiceData[val].mark = !this.invoiceData[val].mark;
},
可是實(shí)際并沒(méi)有如設(shè)想的那樣實(shí)現(xiàn)效果，之后修改代碼：
添加this.$forceUpdate();進(jìn)行強(qiáng)制渲染，效果實(shí)現(xiàn)。搜索資料得出結(jié)果：因?yàn)閿?shù)據(jù)層次太多，render函數(shù)沒(méi)有自動(dòng)更新，需手動(dòng)強(qiáng)制刷新。
以上這篇Vue v-for中的 input 或 select的值發(fā)生改變時(shí)觸發(fā)事件操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例
這篇文章主要介紹了Vue.js中使用Vuex實(shí)現(xiàn)組件數(shù)據(jù)共享案例,具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
隨著用戶體驗(yàn)要求的不斷提升,快捷鍵的處理也成為了提高用戶操作效率的一個(gè)重要方面,本文將深入探討如何在?Vue?3?中高效地處理快捷鍵,希望對(duì)大家有所幫助2024-11-11
vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要給大家分享將 prop 限制為類(lèi)型列表、默認(rèn)內(nèi)容和擴(kuò)展點(diǎn)、使用引號(hào)觀察嵌套值、知道何時(shí)使用 v-if、單作用域 slot 的簡(jiǎn)寫(xiě)、有條件地渲染slot等25 個(gè)Vue 技巧，下文是下相關(guān)資料,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
VUE+axios+php實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了VUE+axios+php實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
在使用vue開(kāi)發(fā)項(xiàng)目的時(shí)候,很多使用會(huì)import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)商品購(gòu)物車(chē)全選反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04