<div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div>改成组件，使用v-for循环,并且把数据放在data中

好的，以下是代码实现：

<template>
  <div class="fr">
    <ul>
      <li v-for="(item, index) in navList" :key="index">
        <a :href="item.href">{{ item.text }}</a>
        <i v-if="item.icon" class="icomoon">{{ item.icon }}</i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      navList: [
        { text: '我的订单', href: '#' },
        { text: '我的购物', href: '#', icon: '' },
        { text: '商城会员', href: '#' },
        { text: '企业采购', href: '#' },
        { text: '关注商城', href: '#', icon: '' },
        { text: '客户服务', href: '#', icon: '' },
        { text: '网站导航', href: '#', icon: '' }
      ]
    }
  }
}
</script>

使用v-for循环遍历navList数组中的每个对象，利用:key属性指定循环的唯一标识，同时根据对象中的值动态生成HTML内容。其中，如果对象有icon属性，就显示对应的图标。navList数组可通过data返回。