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 事件对象属性小结
Apr 27 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
js实现显示手机号码效果
Mar 09 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
对vue生命周期的深入理解
Dec 03 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
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
js实现日历
2020/11/07 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
应届生保险求职信
2013/11/11 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
学校开学标语
2014/10/06 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
浅谈python中的多态
2021/06/15 Python
在js中修改html body的样式
2021/11/11 Javascript
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python