<p class="mod_copyright_links"> 关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U </p> <p class="mod_copyright_info"> 地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702 </p>改成组件,将数据全部放在dataa中
时间: 2023-08-21 17:36:45 浏览: 102
网站开发技术-品优购项目
好的,以下是将该HTML代码转化为Vue组件并将数据全部放在data中的代码:
```
<template>
<div>
<p class="links">{{ links.join(' | ') }}</p>
<p class="info">地址:{{ address }} 邮编:{{ zipCode }} 电话:{{ phone }} 传真:{{ fax }} 邮箱: {{ email }} <br> {{ icp }} </p>
</div>
</template>
<script>
export default {
data() {
return {
links: ['关于我们', '联系我们', '联系客服', '商家入驻', '营销中心', '手机品优购', '友情链接', '销售联盟', '品优购社区', '品优购公益', 'English Site', 'Contact U'],
address: '北京市昌平区建材城西路金燕龙办公楼一层',
zipCode: '100096',
phone: '400-618-4000',
fax: '010-82935100',
email: 'zhanghj+itcast.cn',
icp: '京ICP备08001421号京公网安备110108007702'
}
}
}
</script>
<style>
.links {
margin: 0;
font-size: 14px;
color: #666;
}
.info {
margin: 0;
font-size: 12px;
color: #999;
line-height: 1.5;
}
</style>
```
这里使用了Vue单文件组件的格式,将HTML代码放在了template中,将数据放在了data中,同时定义了一些样式。在template中,使用了Vue的指令和插值表达式来动态显示数据。最终,将组件导出,供其他组件使用。
阅读全文