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实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
checkbox使用示例
Aug 23 Javascript
浅谈javascript获取元素transform参数
Jul 24 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
vue实现图书管理系统
Dec 29 Vue.js
微信小程序抽奖组件的使用步骤
Jan 11 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 中include()与require()的对比
2006/10/09 PHP
一个简单的PHP投票程序源码
2007/03/11 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
js三种排序算法分享
2012/08/16 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
JS实现轮播图效果
2020/01/11 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
对于Python中线程问题的简单讲解
2015/04/03 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python画双y轴图像的示例代码
2019/07/07 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
css3 transform属性详解
2014/09/30 HTML / CSS
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
大学生在校学习的自我评价
2014/02/18 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
六一儿童节致辞
2015/07/31 职场文书