【vue 项目】v-for循环写相同样式按钮、并分别对按钮进行接口调用以及禁用

最新推荐文章于 2023-03-10 16:40:37 发布

Aohan-z

最新推荐文章于 2023-03-10 16:40:37 发布

阅读量1.2k

点赞数

分类专栏： vue项目文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Aohanzzz/article/details/127915600

版权

实现下方效果，之前写了五个按钮，在每个按钮上加class样式、icon图标、@click点击。
后来有位大佬重新写了，感觉没有之前繁琐，在此记录一下。
在这里插入图片描述
按钮04 禁用状态

html

<div>
    <el-row>
      <el-col v-for="(item, index) in butList" :key="index" :span="4">
        <el-button type="text" :disabled="item.type" @click="butClick(index)">
          <i :class="item.icon"
            :style="{ background: (item.type ? '#46b2bf' : (index ==