<div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <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> </div> </div>改成组件，把数据统一放在data下

可以将上述代码改成一个Vue组件，代码如下：

<template>
  <div class="shortcut">
    <div class="w">
      <div class="fl">
        <ul>
          <li>{{ welcome }}</li>
          <li>
            <a href="#">{{ login }}</a>
            <a href="#" class="style-red">{{ register }}</a>
          </li>
        </ul>
      </div>
      <div class="fr">
        <ul>
          <li><a href="#">{{ myOrder }}</a></li>
          <li class="spacer"></li>
          <li>
            <a href="#">{{ myShopping }}</a>
            <i class="icomoon"></i>
          </li>
          <li class="spacer"></li>
          <li><a href="#">{{ mallMember }}</a></li>
          <li class="spacer"></li>
          <li><a href="#">{{ corporatePurchase }}</a></li>
          <li class="spacer"></li>
          <li><a href="#">{{ followMall }}</a> <i class="icomoon"></i></li>
          <li class="spacer"></li>
          <li><a href="#">{{ customerService }}</a> <i class="icomoon"></i></li>
          <li class="spacer"></li>
          <li><a href="#">{{ siteNavigation }}</a> <i class="icomoon"></i></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      welcome: '购物商城欢迎您！',
      login: '请登录',
      register: '免费注册',
      myOrder: '我的订单',
      myShopping: '我的购物',
      mallMember: '商城会员',
      corporatePurchase: '企业采购',
      followMall: '关注商城',
      customerService: '客户服务',
      siteNavigation: '网站导航',
    };
  },
};
</script>

在这个组件中，我们将所有的文本数据都统一放在了`data`中，并且通过双花括号语法将其渲染到模板中。这样做的好处是，我们可以更方便地统一管理数据，同时也可以更容易地进行国际化处理。