Vue 監(jiān)聽列表item渲染事件方法
直入正題，不廢話！
使用Vue渲染列表是很簡單方便的，但如果需要在渲染item的時(shí)候去監(jiān)聽事件就無法實(shí)現(xiàn)了，樓主我翻遍了Vue的api也沒找到合適的方法去解決，其中也提到使用watch和vue.nextClick 監(jiān)聽，但這些都不能實(shí)現(xiàn)，苦惱啊，不過機(jī)智的我還是想到了曲線救過的方法，利用過濾器來實(shí)現(xiàn)，代碼如下
<li v-for="item in list"> {{item.content | setEvent item.id , item.name}}</li>
new Vue({
el:'',
data:{
list:[]
},
fliters:{
setEvent:function(content , id , name) {
// TODO 處理你的事件。。。。
return content ;
}
}
})
過濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)（item.content）。
帶引號(hào)的參數(shù)視為字符串，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算。這里將表達(dá)式 item.id 將傳給過濾器作為第二個(gè)參數(shù)，表達(dá)式 item.name 的值在計(jì)算出來之后作為第三個(gè)參數(shù)。
注意一定要return 當(dāng)前l(fā)i需要顯示的內(nèi)容，否則li無數(shù)據(jù)展示，這樣就可以實(shí)現(xiàn)監(jiān)聽列表item的的渲染事件，厲害不！哈哈哈！
以上這篇Vue 監(jiān)聽列表item渲染事件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)
這篇文章主要給大家介紹了關(guān)于Uncaught(in?promise)TypeError:?list?is?not?iterable報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式
這篇文章主要介紹了vue項(xiàng)目之?dāng)?shù)量占比進(jìn)度條實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn)
Lambda函數(shù),也稱為匿名函數(shù),是Vue3中的一種函數(shù)類型,綁定匿名方法和綁定普通方法主要是寫法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue axios封裝httpjs,接口公用配置攔截操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例
本文主要介紹了使用ElementUI寫一個(gè)前端分頁查詢的實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
基于vue-cli npm run build之后vendor.js文件過大的解決方法
今天小編就為大家分享一篇基于vue-cli npm run build之后vendor.js文件過大的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
swiper是我之前做前端頁面會(huì)用到的一個(gè)插件,我自己認(rèn)為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
在nuxt使用vueX代替storage的實(shí)現(xiàn)方案
這篇文章主要介紹了在nuxt使用vueX代替storage的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue推薦組件化開發(fā)，所以就把每個(gè)圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08