Vue 監(jiān)聽列表item渲染事件方法
直入正題，不廢話！
使用Vue渲染列表是很簡(jiǎn)單方便的，但如果需要在渲染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渲染事件方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用微信公眾號(hào)js-sdk踩坑記錄，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
VUE學(xué)習(xí)之Element-ui文件上傳實(shí)例詳解
今天進(jìn)行了element?文件上傳組件的運(yùn)用,寫一下心得,下面這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)之Element-ui文件上傳的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本文將結(jié)合實(shí)例代碼，解決Vue+SpringBoot+Shiro跨域問題，相信大家剛開始做都會(huì)遇到這個(gè)問題，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue.js 無限滾動(dòng)列表性能優(yōu)化方案
這篇文章主要介紹了Vue.js 無限滾動(dòng)列表性能優(yōu)化方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了vue中methods、mounted等的使用方法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue腳手架創(chuàng)建的相關(guān)資料,Vue腳手架是vue官方提供的標(biāo)準(zhǔn)化開發(fā)工具(平臺(tái)),文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
使用Vue-Router 2實(shí)現(xiàn)路由功能實(shí)例詳解
vue-router 2只適用于Vue2.x版本，下面我們是基于vue2.0講的如何使用vue-router 2實(shí)現(xiàn)路由功能,需要的朋友可以參考下2017-11-11
Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼
本篇文章主要介紹了Vue下滾動(dòng)到頁面底部無限加載數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04