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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
jQuery实现简单全选框
Sep 13 jQuery
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python基于phantomjs实现导入图片
2016/05/13 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
浅谈python中get pass用法
2019/03/19 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
Python yield的用法实例分析
2020/03/06 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
初中重阳节活动总结
2015/05/05 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python