<div id="app"> <!-- 顶部快捷导航start --> <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> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化,数据放在data中
时间: 2023-08-14 18:47:55 浏览: 45
<>
<div id="app">
<TopNavigation :isLogin="isLogin" :isMember="isMember" />
<CartHeader />
</div>
</template>
<script>
import TopNavigation from "@/components/TopNavigation.vue";
import CartHeader from "@/components/CartHeader.vue";
export default {
name: "App",
components: {
TopNavigation,
CartHeader,
},
data() {
return {
isLogin: false,
isMember: false,
};
},
};
</script>
相关问题
<div id="app"> <!-- 顶部快捷导航start --> <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> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化
可以将这段代码分成两个组件:顶部快捷导航和购物车头部。
1. 顶部快捷导航组件:
```html
<template>
<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>
</template>
<script>
export default {
name: "Shortcut"
}
</script>
```
2. 购物车头部组件:
```html
<template>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>购物车</b>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CartHeader"
}
</script>
```
然后在父组件中使用这两个子组件:
```html
<template>
<div id="app">
<Shortcut />
<CartHeader />
</div>
</template>
<script>
import Shortcut from "@/components/Shortcut.vue";
import CartHeader from "@/components/CartHeader.vue";
export default {
components: {
Shortcut,
CartHeader
}
}
</script>
```
<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`中,并且通过双花括号语法将其渲染到模板中。这样做的好处是,我们可以更方便地统一管理数据,同时也可以更容易地进行国际化处理。