购物车渲染案例:
我做出的效果:
由于接口的问题,目前只有三本书
案例的要求:
- 鼠标经过时会有阴影和小动画
- 点击X 可以删除图书
- 从接口请求图书
以下是我写的代码:
(写的不好请见谅)
因为代码太多,我只截了主要部分。
请求图书接口等其他数据我写在了vuex的store里
具体vuex的请求方式和使用方式,我在另一篇博客有仔细详述
<template>
<div id="app">
<h2>我的购物车</h2>
<!-- <button @click="$store.dispatch('getBooks')">请求图书</button> -->
<div class="list">
<!-- v-for="(循环变量,索引变量 in 数组)" -->
<div
v-for="(item, index) in $store.state.books"
:key="index"
class="book"
:title="item.name"
>
<a href="" @click.prevent>
<div class="Img">
<img :src="item.img" :alt="item.name" />
</div>
<!-- 动态绑定属性值 -->
<h4 class="title" v-bind:title="item.name">{{ item.name }}</h4>
<p class="desc"></p>
<p class="price">
<span class="num">{{ item.price }}</span>
</p>
</a>
<button class="btn" title="移出购物车" @click="del(index)">X</button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
del (index) {
console.log('删除', index)
// splice移除boosks数组下标为index
this.$store.state.books.splice(index, 1)
}
}
}
</script>
<style scoped>
h4,
p {
margin: 0;
font-weight: normal;
}
a {
text-decoration: none;
}
body {
background-color: #eee;
}
#app {
background-color: #fff;
width: 800px;
height: 700px;
margin: 50px auto;
text-align: center;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em;
}
.list {
padding: 1em;
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.book {
position: relative;
flex-basis: 22%;
margin-right: 2%;
margin-bottom: 1em;
text-align: center;
background-color: #fff;
padding: 1em 0;
transition: all 0.2s linear;
border: 2px solid #fff;
}
.book:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
transform: translate3d(0, -2px, 0);
}
.title {
line-height: 2em;
margin: 0;
padding: 0;
color: #000;
}
.Img img {
width: 150px;
height: 150px;
}
.desc {
margin: 0;
font-size: 16px;
}
.price {
margin: 0;
font-size: 14px;
}
.btn {
cursor: pointer;
position: absolute;
right: 0.8em;
top: 0.8em;
border: none;
color: #ff6700;
padding: 0.5em 0.5em;
font-size: 12px;
user-select: none;
outline: 0 none !important;
}
.btn:active {
border: none;
}
.btn:hover {
background-color: #ff6700;
color: #fff;
}
.selected {
border: 2px solid #ccc;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.cart {
border: 1px solid #eee;
background-color: #fff;
text-align: center;
position: fixed;
padding: 1em;
right: 100px;
top: 200px;
}
</style>