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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
swiper实现异形轮播效果
Nov 28 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 组件化编程技巧
2009/06/06 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
BootStrap selectpicker
2016/06/20 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python函数和模块的使用总结
2019/05/20 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
python随机生成库faker库api实例详解
2019/11/28 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
书香校园活动方案
2014/02/28 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
售房协议书范本2014
2014/10/23 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
创业计划书之酒店
2019/08/30 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
js Proxy的原理详解
2021/05/25 Javascript
nginx结合openssl实现https的方法
2021/07/25 Servers
Python装饰器详细介绍
2022/03/25 Python