vue项目如何利用v-for批量绑定按钮,下面给大家简单介绍一下实现代码!
1、定义一个v-for循环
<el-button
v-for="(item, index) in tableBtn"
:type="item.type"
:icon="item.icon"
:key="index"
@click="callBack(item.method)">
{ item.label }}
</el-button>
2、tableBtn数组
_table.tableBtn = [
{
type: "primary",
icon: "el-icon-picture-outline",
method: "openImage",
label: "图像"
},
{
type: "primary",
icon: "el-icon-document",
method: "openReport",
label: "报告"
},
{
type: "danger",
icon: "el-icon-video-camera",
method: "openVideo",
label: "视频"
}
];
3、methods按钮事件
openImage() {
console.log("打开图像");
},
openReport() {
console.log("打开报告";
},
openVideo() {
console.log("打开视频");
},
callBack(method) {
this[method]();
}
以上是编程学习网小编为您介绍的“vue项目利用v-for批量绑定按钮”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:vue项目利用v-for批量绑定按钮


基础教程推荐
猜你喜欢
- 如何在linux上使用HTML5在firefox中运行webm视频文件? 2023-10-25
- Vue Router 的路由配置 动态路由和懒加载 2023-10-08
- 基于ajax后台返回的数据为空前台显示出现undefined的解决方法 2023-02-22
- 详解SPA中前端路由基本原理与实现方式 2024-02-04
- html5构建触屏网站之touch事件介绍 2024-02-05
- 微信小程序如何做列表渲染(示例介绍) 2024-12-13
- CCPry JS类库 代码 2024-01-08
- layui数据表格使用(一:基础篇,数据展示、分页组件、表格内嵌表单和图片) 2022-12-16
- jQuery中iframe的操作(点击按钮新增窗口) 2024-01-24
- ajax同步验证单号是否存在的方法 2023-01-21