快捷導(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)看看吧

直入正題，不廢話！

使用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ī)智的我還是想到了曲線救過(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中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫(xiě)入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(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ò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(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ù)類型,綁定匿名方法和綁定普通方法主要是寫(xiě)法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
vue axios封裝httpjs,接口公用配置攔截操作
這篇文章主要介紹了vue axios封裝httpjs,接口公用配置攔截操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
使用ElementUI寫(xiě)一個(gè)前端分頁(yè)查詢的實(shí)例
本文主要介紹了使用ElementUI寫(xiě)一個(gè)前端分頁(yè)查詢的實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法
今天小編就為大家分享一篇基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue-swiper的使用教程
swiper是我之前做前端頁(yè)面會(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 中 echart 在子組件中只顯示一次的問(wèn)題
vue推薦組件化開(kāi)發(fā)，所以就把每個(gè)圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來(lái)給大家介紹vue 中 echart 在子組件中只顯示一次的問(wèn)題，需要的朋友參考下吧
2018-08-08