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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
在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
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Python读写ini文件的方法
2015/05/28 Python
python框架django项目部署相关知识详解
2019/11/04 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
公职人员索取回扣检举信
2014/04/04 职场文书
鸟的天堂导游词
2015/01/31 职场文书
开学典礼观后感
2015/06/15 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书