Vue 监听列表item渲染事件方法
更新时间：2018年09月06日 09:10:42 作者：K-Code
今天小编就为大家分享一篇Vue 监听列表item渲染事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
直入正题，不废话！
使用Vue渲染列表是很简单方便的，但如果需要在渲染item的时候去监听事件就无法实现了，楼主我翻遍了Vue的api也没找到合适的方法去解决，其中也提到使用watch和vue.nextClick 监听，但这些都不能实现，苦恼啊，不过机智的我还是想到了曲线救过的方法，利用过滤器来实现，代码如下
<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 ;
}
}
})
过滤器函数始终以表达式的值作为第一个参数（item.content）。
带引号的参数视为字符串，而不带引号的参数按表达式计算。这里将表达式 item.id 将传给过滤器作为第二个参数，表达式 item.name 的值在计算出来之后作为第三个参数。
注意一定要return 当前li需要显示的内容，否则li无数据展示，这样就可以实现监听列表item的的渲染事件，厉害不！哈哈哈！
以上这篇Vue 监听列表item渲染事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中使用xlsx库可以帮助我们读取和写入Excel文件,下面这篇文章主要给大家介绍了关于vue中如何使用xlsx读取excel文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
关于Uncaught(in promise)TypeError: list is not iterable报错
这篇文章主要给大家介绍了关于Uncaught(in promise)TypeError: list is not iterable报错的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue项目之数量占比进度条实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Lambda函数,也称为匿名函数,是Vue3中的一种函数类型,绑定匿名方法和绑定普通方法主要是写法上的区别,其他的区别并不是很大,本文主要介绍了Vue3中使用匿名函数的方法实现,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue axios封装httpjs,接口公用配置拦截操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了使用ElementUI写一个前端分页查询的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
基于vue-cli npm run build之后vendor.js文件过大的解决方法
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
swiper是我之前做前端页面会用到的一个插件,我自己认为是非常好用的。这篇文章给大家介绍vue-swiper的使用教程，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧2018-08-08
最新评论