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打造TabPanel效果代码
May 22 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
浅谈TypeScript的类型保护机制
Feb 23 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
香妃
2021/03/03 冲泡冲煮
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
js判断undefined变量类型使用typeof
2013/06/03 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python中常见的异常总结
2018/02/20 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python打印异常信息的两种实现方式
2019/12/24 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
社区元宵节活动总结
2015/02/06 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
导游词之湖北武当山
2019/09/23 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL