Vue 监听列表item渲染事件方法


Posted in Javascript onSeptember 06, 2018

直入正题,不废话!

使用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渲染事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
js实现前端分页页码管理
Jan 06 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 #Javascript
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 #Javascript
Vue中使用clipboard实现复制功能
Sep 05 #Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
You might like
第五节 克隆 [5]
2006/10/09 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
许愿墙中用到的函数
2006/10/07 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
python使用webdriver爬取微信公众号
2018/08/31 Python
Python函数返回不定数量的值方法
2019/01/22 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
STP的判定过程
2012/10/01 面试题
老总助理工作岗位职责
2014/02/06 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
大学生暑期实践报告
2015/07/13 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
德劲DE1105机评
2022/04/05 无线电