步驟: 1. 搭一下結構,
2. 下載axios包
3. 映入axios包
4. 在created() {} 發送請求獲取資料
5. 將資料利用v-for回圈到頁面中(在data里面宣告一個空陣列,來裝載請求回來的資料)
6. 調整樣式
7. 根據索引洗掉當前的li
<template>
<div>
<h2>我的購物車</h2>
<ul>
<li v-for="(item,index) in list" :key="index">
<img :src="item.img" alt="">
<p>{{item.name}}</p>
<p>{{item.price}}</p>
<div class="off" @click="btn(index)">×</div>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: '',
props: {},
data () {
return {
list: []
}
},
methods: {
btn (index) {
this.list.splice(index, 1)
}
},
computed: {},
watch: {},
created () {
axios({
url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
}).then(res => {
console.log(res)
this.list = res.data.data
})
},
mounted () {},
components: {}
}
</script>
<style scoped>
h2 {
text-align: center;
}
li {
position: relative;
width: 190px;
height: 240px;
list-style: none;
float: left;
box-shadow: 3px;
}
img {
width: 180px;
height: 200px;
}
.off {
position: absolute;
right: 20px;
top: 5px;
width: 30px;
height: 30px;
background-color: #ccc;
text-align: center;
}
.off:hover {
background-color: orange;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305215.html
標籤：其他
上一篇：關于閉包的知識點