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的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 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语法(2)
2006/10/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
javascript中的new使用
2010/03/20 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
详解JS函数重载
2014/12/04 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python实现飞机大战微信小游戏
2020/03/21 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
vue常用指令代码实例总结
2020/03/16 Python
python 瀑布线指标编写实例
2020/06/03 Python
python利用opencv实现颜色检测
2021/02/23 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
幼儿园教师心得体会范文
2016/01/21 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL