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工具 Event封装
Aug 21 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序实现拼图小游戏
Oct 22 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
杏林同学录(三)
2006/10/09 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
js 遍历对象的属性的代码
2011/12/29 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
python检测服务器是否正常
2014/02/16 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Selenium定位元素操作示例
2018/08/10 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python中Yield的基本用法
2020/10/18 Python
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
2014全国两会学习心得体会1000字
2014/03/10 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
交通安全学习心得体会
2016/01/18 职场文书
Python anaconda安装库命令详解
2021/10/16 Python