vue elementUi 根据数组 循环出来2个button button 中的type icon 都从数组中读取

在Vue和Element UI中，你可以使用v-for指令循环生成多个button组件，并从数组中读取type和icon属性的值。以下是一个示例：

<template>
  <div>
    <button
      v-for="item in buttons"
      :key="item.id"
      :type="item.type"
    >
      <i :class="item.icon"></i>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { id: 1, type: 'primary', icon: 'el-icon-search' },
        { id: 2, type: 'success', icon: 'el-icon-check' },
      ]
    };
  }
};
</script>

在上面的示例中，我们在div元素中使用v-for指令循环生成多个button组件。buttons数组包含了要循环生成的button的配置信息，每个button对象具有id、type和icon属性。我们使用v-for指令将每个button对象绑定到按钮上，并使用:key绑定唯一的key值。

在button标签中，我们使用:type绑定item.type属性的值，这样每个按钮就会根据数组中的type属性设置自己的类型。同时，我们使用:class绑定item.icon属性的值，将icon属性作为class名称，以便在按钮中显示相应的图标。

这样，当页面渲染时，根据buttons数组中的配置信息，会自动循环生成两个按钮，并从数组中读取type和icon属性的值来设置按钮的类型和图标。