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实时获取系统当前时间实例代码
Jun 28 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
jquery分割字符串的方法
Jun 24 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
微信小程序实现简单表格
Feb 14 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 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
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Javascript 实用小技巧
2010/04/07 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Vue计算属性的使用
2017/08/04 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
挂牌仪式主持词
2014/03/20 职场文书
主题实践活动总结
2014/05/08 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2014年团工作总结
2014/11/27 职场文书
二审答辩状范文
2015/05/22 职场文书