【for循环，实现多个不同的背景图】

TWenYuan

已于 2023-03-02 11:06:37 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签：前端

于 2022-07-25 09:34:20 首次发布

本文链接：https://blog.csdn.net/TWenYuan/article/details/125968465

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

方法一：
1、绑定内联样式
在这里插入图片描述
2、确定背景图片

3、

方法二：注意两层循环，样式:style=“background-image: url(${require('@/images/dataSourceTypeIcon/' + item.name + '.png')})”

<div>
      <div style="height: 400px; overflow: hidden auto">
        <div v-for="(group, index) of options" :key="index">
          <div class="group_name">{{ group.group_name }}</div>
          <a-row :gutter="[16, 16]">
            <a-col :span="6" v-for="item of group.items" :key="item.id" v-show="item.name.search(searchVal) !== -1">
              <span class="logo" @click="$emit('select', item)" :style="`background-image: url(${require('@/images/dataSourceTypeIcon/' + item.name + '.png')})`"> </span>
              <div style="text-align: center">{{ item.name }}</div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>



 <script>
export default {
  name: "selectTypeModal",
  props: {
    visible: {
      type: Boolean,
    },
    sourceTypeList: {
      type: Array,
      default: [],
    },
  },
  emits: ["select", "update:visible"],
  data() {
    return { searchVal: "" };
  },
  computed: {
    options() {
      let options = {};
      for (const item of this.sourceTypeList) {
        if (options[item.classifier] === undefined) options[item.classifier] = [item];
        else options[item.classifier].push(item);
      }
      return Object.entries(options).map(([group_name, items]) => ({ group_name, items }));
    },
  },
};
</script>