VUE v-for循环中每个item节点动态绑定不同函数的实例


Posted in Javascript onSeptember 26, 2018

一. 业务场景:

一个title 处 可能有 一个或多个按钮, 按钮对应不同的响应事件

二. 思路 :

按钮个数 根据传入的数据length 来循环渲染, 每条数据对应的事件名称 通过动态绑定

三. 封装组件

1. 视图层面

VUE v-for循环中每个item节点动态绑定不同函数的实例

2. 代码部分

2.1 结构部分

VUE v-for循环中每个item节点动态绑定不同函数的实例

<!-- 多个button组件-->
<titleAddBtn :addBtnList="addBtnList" @clkCallBk="listenCall"></titleAddBtn>

2.2 JS部分

2.2.1 引入组件

import titleAddBtn from '@/components/titleAddBtn'

组件注册:

components: { titleAddBtn },

2.2.2 传入数据

data() {

return {
 addBtnList: [
{
 title: '添加1',
 icon: 'el-icon-circle-plus-outline',
 methods: 'addItem'
},
{
 title: '添加2',
 icon: 'el-icon-circle-plus-outline',
 methods: 'addItem2'
},
{
 title: '添加3',
 icon: 'el-icon-circle-plus-outline',
 methods: 'addItem3'
}
 ],

}
 }

2.2.2 传入数据说明:

title 是 按钮上的文字,

icon 传入 elementui icon部分 提供的 class名

methods 传入 在父组件中 定义的 对应按钮的函数方法名

2.2.3 监听 子组件点击哪个按钮(促发哪个函数)

methods: {

listenCall(methodsWords) {
 console.log('methodsWords', methodsWords)
 this[methodsWords]()
},
 }

2.2.4 这里的 this[methodsWords] 动态方法 指向 数据定义中的 addBtnList 的 methods

还需要添加

methods: {

addItem() {
 console.log(11)
},
addItem2() {
 console.log(112)
},
...
}

四. 总结

最后的 this[methodsWords]() 调用 不能够写成 this.methodsWords()

五. 封装的组件部分

<template>
 <div>
 <div v-for="item in addBtnList" class="add-btn" @click="clkCall(item.methods)">
 <i class="add-btn-i" :class="item.icon"></i>
 <div>{{item.title}}</div>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'titleAddBtn',
 props: ['addBtnList'],
 methods: {
 clkCall(methodsWords) {
 this.$emit('clkCallBk', methodsWords)
 }
 }
 }
</script>

以上这篇VUE v-for循环中每个item节点动态绑定不同函数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 #Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
You might like
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python3 实现对图片进行局部切割的方法
2018/12/05 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
厨房工作人员岗位职责
2013/11/15 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
勇敢的心观后感
2015/06/09 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang