快捷導(dǎo)航

Vue 監(jiān)聽(tīng)列表item渲染事件方法

更新時(shí)間：2018年09月06日 09:10:42 作者：K-Code

今天小編就為大家分享一篇Vue 監(jiān)聽(tīng)列表item渲染事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

直入正題，不廢話(huà)！

使用Vue渲染列表是很簡(jiǎn)單方便的，但如果需要在渲染item的時(shí)候去監(jiān)聽(tīng)事件就無(wú)法實(shí)現(xiàn)了，樓主我翻遍了Vue的api也沒(méi)找到合適的方法去解決，其中也提到使用watch和vue.nextClick 監(jiān)聽(tīng)，但這些都不能實(shí)現(xiàn)，苦惱啊，不過(guò)機(jī)智的我還是想到了曲線(xiàn)救過(guò)的方法，利用過(guò)濾器來(lái)實(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 ;   
   }
  }
})

過(guò)濾器函數(shù)始終以表達(dá)式的值作為第一個(gè)參數(shù)（item.content）。

帶引號(hào)的參數(shù)視為字符串，而不帶引號(hào)的參數(shù)按表達(dá)式計(jì)算。這里將表達(dá)式 item.id 將傳給過(guò)濾器作為第二個(gè)參數(shù)，表達(dá)式 item.name 的值在計(jì)算出來(lái)之后作為第三個(gè)參數(shù)。

注意一定要return 當(dāng)前l(fā)i需要顯示的內(nèi)容，否則li無(wú)數(shù)據(jù)展示，這樣就可以實(shí)現(xiàn)監(jiān)聽(tīng)列表item的的渲染事件，厲害不！哈哈哈！

以上這篇Vue 監(jiān)聽(tīng)列表item渲染事件方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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