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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
微信小程序 地图map实例详解
Jun 07 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
js密码强度检测
2016/01/07 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
Vue实现页面添加水印功能
2019/11/09 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
python搜索包的路径的实现方法
2019/07/19 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
关爱残疾人标语
2014/06/25 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python