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中使用微信公众号js-sdk踩坑记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
今天进行了element 文件上传组件的运用,写一下心得,下面这篇文章主要给大家介绍了关于VUE学习之Element-ui文件上传的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
本文将结合实例代码，解决Vue+SpringBoot+Shiro跨域问题，相信大家刚开始做都会遇到这个问题，需要的朋友们下面随着小编来一起学习学习吧2021-06-06
本文主要介绍了vue mixins代码复用的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了Vue.js 无限滚动列表性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue中methods、mounted等的使用方法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要给大家介绍了关于Vue脚手架创建的相关资料,Vue脚手架是vue官方提供的标准化开发工具(平台),文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2024-01-01
vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下2017-11-11
本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论