在vue中使用v-for遍历arco.design图标

代码

               <li v-for="item in leftList">
                    <div class="contentLeftImg">
                        <!-- 基本用法 -->
                        <!-- <icon-video-camera :style="{ fontSize: '24px' }" /> -->

                        <!-- 动态取值 -->
                        <component :is="item.leftIcon"></component>
                        <!-- 设置：is后面的值为  组件名 -->
                        <!-- <component :is="'哈哈哈'"></component> -->
                    </div>
                    <div class="contentLeftText">
                        <!-- 视频 -->
                        {{ item.leftText }}
                    </div>
                </li>

数据

const leftList = [
    {
        leftIcon: "icon-video-camera",
        leftText: '视频',
        id: 1,
    },
]

在 Vue.js 中，<component :is="item.leftIcon"></component>?是一个动态组件的使用示例。

这里的关键点是?:is="item.leftIcon"。:is?是一个动态属性，它告诉 Vue 根据?item.leftIcon?的值来动态地渲染一个组件。

具体来说：

1. item.leftIcon?是一个变量，它应该包含你想要渲染的组件的名称（字符串）。
2. 当?item.leftIcon?的值改变时，Vue 会重新创建并渲染该组件。

例如，如果?item.leftIcon?的值是?'MyButton'，那么 Vue 会尝试找到一个名为?MyButton?的组件，并使用它来渲染这个位置。

这种动态组件的用法在很多场景下都非常有用，尤其是当你需要根据某些条件或数据动态地改变组件时。