写一个基础购物网站样式并使用vue
时间: 2024-04-07 12:29:18 浏览: 16
以下是一个基础的购物网站样式并使用Vue.js,包括头部、导航栏、商品列表和底部:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础购物网站样式</title>
<style>
/* 头部样式 */
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* 导航栏样式 */
.navbar {
background-color: #555;
color: #fff;
padding: 10px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin-right: 20px;
font-size: 18px;
}
/* 商品列表样式 */
.product {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
font-size: 16px;
}
.product img {
width: 200px;
height: 200px;
margin-right: 20px;
float: left;
}
.product h3 {
margin-top: 0;
}
.product p {
margin-bottom: 0;
}
/* 底部样式 */
.footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<h1>基础购物网站样式</h1>
</div>
<div class="navbar">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div class="product" v-for="item in products" :key="item.id">
<img :src="item.img" alt="商品图片">
<h3>{{ item.name }}</h3>
<p>价格:{{ item.price }}元</p>
<button @click="addToCart(item)">加入购物车</button>
</div>
<div class="footer">
<p>©2021 版权所有</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
products: [
{ id: 1, name: '商品1', price: 100, img: 'http://placehold.it/200x200' },
{ id: 2, name: '商品2', price: 200, img: 'http://placehold.it/200x200' },
{ id: 3, name: '商品3', price: 300, img: 'http://placehold.it/200x200' },
{ id: 4, name: '商品4', price: 400, img: 'http://placehold.it/200x200' },
{ id: 5, name: '商品5', price: 500, img: 'http://placehold.it/200x200' },
],
cart: []
},
methods: {
addToCart(item) {
this.cart.push(item)
}
}
})
</script>
</body>
</html>
```
在本例中,我们使用了Vue.js来实现商品的展示和购物车的添加功能。我们使用了v-for指令来循环渲染商品列表,使用v-bind指令来绑定商品的属性,使用v-on指令来绑定按钮的点击事件。同时,我们使用了Vue实例的data属性来存储商品和购物车信息,使用methods属性来定义添加商品到购物车的方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)