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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
jQuery中的select操作详解
Nov 29 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jQuery入门知识简介
2010/03/04 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
python使用turtle库绘制时钟
2020/03/25 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
英语自荐信范文
2013/12/11 职场文书
学生请假条
2014/04/11 职场文书
项目建议书范文
2014/05/12 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
视光学专业自荐信
2014/06/24 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python