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 相关文章推荐
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
原生js无缝轮播插件使用详解
Mar 09 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
原生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
mysql时区问题
2008/03/26 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
Javascript实现字数统计
2015/07/03 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python+opencv识别图片中的圆形
2020/03/25 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
理发店策划方案
2014/06/05 职场文书
私人委托书格式
2014/09/10 职场文书
培养联系人考察意见
2015/06/01 职场文书
盲山观后感
2015/06/11 职场文书
体育教师研修感悟
2015/11/18 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
我的收音机情缘
2022/04/05 无线电