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 用6N±1法求素数 实例教程
Oct 20 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
Vuex简单入门
Apr 19 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 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
php生成随机密码的几种方法
2011/01/17 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
基于python中__add__函数的用法
2019/11/25 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
Python中无限循环需要什么条件
2020/05/27 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
教师考核评语
2014/04/28 职场文书
部门活动策划方案
2014/08/16 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
工作感言一句话
2015/08/01 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Mysql 一主多从的部署
2022/05/20 MySQL