请将所有数据分到data中
时间: 2024-03-22 11:37:51 浏览: 22
好的,以下是将所有数据分到 `data` 中的代码:
```
<template>
<div class="copyright">
<p class="links">
{{ links }}
</p>
<p class="info">
地址:{{ address }} 邮编:{{ zipCode }} 电话:{{ phone }} 传真:{{ fax }} 邮箱: {{ email }} <br> {{ icpCode }}{{ safetyCode }}
</p>
</div>
</template>
<script>
export default {
name: 'Copyright',
data() {
return {
links: '关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact Us',
address: '北京市昌平区建材城西路金燕龙办公楼一层',
zipCode: '100096',
phone: '400-618-4000',
fax: '010-82935100',
email: 'zhanghj+itcast.cn',
icpCode: '京ICP备08001421号',
safetyCode: '京公网安备110108007702',
};
},
};
</script>
<style scoped>
.links {
margin-bottom: 10px;
}
.info {
font-size: 12px;
line-height: 18px;
color: #666;
}
</style>
```
在这个示例中,我们将原先的 HTML 代码转换成了一个 Vue 组件。组件的名称为 `Copyright`,包含两个 `p` 标签:
- `links` 标签用于显示一系列链接;
- `info` 标签用于显示公司的地址、电话、传真、邮箱等信息。
组件的 CSS 样式使用了 scoped 属性,这样可以避免与其他组件的样式冲突。组件的数据通过 `data` 属性进行管理,可以方便地进行修改和维护。