Vue使用v-for遍历map

红太狼 2023-02-14 01:20 8阅读 0赞

**功能：**

遍历数据库中按钮的图片和名字，当页面打开时，触发查询事件，以下图形式显示出来。

![20200531204915192.png][]

**前端代码：**

遍历存在数据库中的按钮名称和图片名称。（其中按钮的click事件名称和按钮图片名称相同。 ）

<template>
      <div class="more">
        
        <van-button type="default" v-for="(value, key) in mor" :key="key" :icon="require(`../../assets/main/${value.image}.png`)" @click="func(value.image)">{
       {value.name}}</van-button>
        
        <van-button type="default" v-for="(value, key) in def" :key="key" :icon="require(`../../assets/main/${value.image}.png`)" @click="func(value.image)">{
       {value.name}}</van-button>
        </div>
    </template>

**后端接口json：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NpZWxfWQ_size_16_color_FFFFFF_t_70][]

如上图，第一段代码中的v-for="(value, key) in mor，就是遍历图中mor里的内容。value.image就是图中横线所标识的值。其中key为键，value为对应的值。用v-for可以找到mor和default里面我们所需的所有的值。

[20200531204915192.png]: https://img-blog.csdnimg.cn/20200531204915192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NpZWxfWQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200531201658323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NpZWxfWQ==,size_16,color_FFFFFF,t_70