<div class="mod_copyright"> <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> </div>将代码改成组件遍历,然后把数据放在data中
时间: 2024-02-10 12:15:20 浏览: 33
好的,可以将这段代码改写成 Vue 组件的形式,如下所示:
```html
<template>
<div class="mod_copyright">
<p v-for="link in links" class="mod_copyright_links">
{{ link }}
</p>
<p class="copyright_info">
地址:{{ address }} 邮编:{{ postalCode }} 电话:{{ phone }} 传真:{{ fax }} 邮箱: {{ email }} <br>
{{ icp }}{{ safety }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
links: [
'关于我们',
'联系我们',
'联系客服',
'商家入驻',
'营销中心',
'手机品优购',
'友情链接',
'销售联盟',
'品优购社区',
'品优购公益',
'English Site',
'Contact U',
],
address: '北京市昌平区建材城西路金燕龙办公楼一层',
postalCode: '100096',
phone: '400-618-4000',
fax: '010-82935100',
email: 'zhanghj+itcast.cn',
icp: '京ICP备08001421号',
safety: '京公网安备110108007702',
};
},
};
</script>
```
这样,我们就可以将原先的 HTML 代码转换为 Vue 组件,并将需要的数据放在组件的 data 中。在模板中,我们使用了 v-for 指令来遍历链接列表,并使用了双括号语法来显示数据。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<html> <head> <meta charset="utf-8" /> <title>星星国际影城</title> <script src="js/main.js" type="text/javascript"></script> </head> <body> 登录| 注册| 全国服务热线:888-8888888 < img src="images/logo.jpg" title="" alt="logo" /> 首页 影片 影城 购票 影城活动 会员服务 顾客互动 <input type="text" placeholder="搜索影片" name="search"/> <input type="button" name="btn" value="" /> < img src="images/b1.png" /> < img src="images/b2.png" /> < img src="images/b3.png" /> 在每行代码进行解释
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)