vue使用v-for渲染多个静态图片

Posted Wayhome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue使用v-for渲染多个静态图片相关的知识,希望对你有一定的参考价值。

  <view class="left">
                <view class="item-wrap"
                      v-for="item in tapItem"
                      :key=\'item.id\'>
                    <image mode=\'widthFix\'
                           class="icon"
                           :src="item.icon" />
                    <text class="txt">{{item.text}}</text>
                </view>
            </view>
data() {
    return {
        // 点击项
        tapItem: [
            {
                id: 0,
                icon: require("@/static/images/goods/goodsDetail/home.png"),
                text: "首页"
            },
            {
                id: 1,
                icon: require("@/static/images/goods/goodsDetail/service.png"),
                text: "客服"
            },
            {
                id: 2,
                icon: require("@/static/images/goods/goodsDetail/share.png"),
                text: "分享"
            }
        ]
    };
},

以上是关于vue使用v-for渲染多个静态图片的主要内容,如果未能解决你的问题,请参考以下文章

vue强制列表渲染重复内容track-by="$index"

Vue-Vue列表渲染v-for

Vue中通过v-for动态添加图片地址

使用 Bootstrap-Vue 添加多个带有 v-for 的 video.slots

Vue中使用v-for渲染数据为何要添加key属性?(原理及作用)

在 Vue.js 中使用 v-for 多次渲染时,表单块会混乱