vue商品推荐信息展示 案例

<template>
  <div id="Recommend">
    <div v-for="item in cgoods" class="item">
      <a :href="item.link">
        <img :src="getUrl(item)">
        <div>
          {{item.title}}
        </div>
      </a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Recommend',
    props: {
      cgoods: {
        type: Array,
      }
    },
    methods: {
      getUrl(item) {
        return require("../assets/" + item.src);
      }
    },
  }
</script>

<style>
  #Recommend {
    display: flex;
    font-size: 13px;
    padding: 10px;
  }

  #Recommend .item {
    flex: 1;
  }

  .item img {
    width: 80px;
    height: 80px;
    /* 圆形 */
    border-radius: 40px;
    margin-bottom: 10px;
  }
</style>