//购物车头组件 var CartHead = { props: ['welcome','login','register','navList'], 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 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> </ul> </div> </div> </div> ,和data:function () { return{ cartname: '购物车', welcome: '购物商城欢迎您!', login: '请登录', register: '免费注册', navList: [ { text: '我的订单', href: '#' }, { text: '我的购物', href: '#', icon: '' }, { text: '商城会员', href: '#' }, { text: '企业采购', href: '#' }, { text: '关注商城', href: '#', icon: '' }, { text: '客户服务', href: '#', icon: '' }, { text: '网站导航', href: '#', icon: '' } ] } },请修改
时间: 2023-12-25 17:06:30 浏览: 23
好的,根据您的要求,我已经修改了代码,如下所示:
```
//购物车头组件
var CartHead = {
props: ['welcome', 'login', 'register', 'navList'],
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 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>
</div>
</div>
`,
data() {
return {
cartname: '购物车',
welcome: '购物商城欢迎您!',
login: '请登录',
register: '免费注册',
navList: [
{ text: '我的订单', href: '#' },
{ text: '我的购物', href: '#', icon: '' },
{ text: '商城会员', href: '#' },
{ text: '企业采购', href: '#' },
{ text: '关注商城', href: '#', icon: '' },
{ text: '客户服务', href: '#', icon: '' },
{ text: '网站导航', href: '#', icon: '' },
],
};
},
};
export default CartHead;
```
在这个组件中,我们使用了 ES6 的模板字符串来定义组件的模板,也就是 `template` 属性。同时,我们将组件的 `data` 属性改为了函数形式,并且将组件导出,方便其他组件或页面使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)