先來看一下效果：
下面是實作代碼與思路：
src/App.vue中
<template>
<div>
<h2>我的購物車</h2>
<ul>
<li v-for="(item, index) in books" :key="index">
<img :src="item.img" alt="" />
<span>{{ item.name }}￥</span>
<p>{{ item.price }}￥</p>
<div class="off" @click="del(index)">×</div>
</li>
</ul>
</div>
</template>
<script>
// 目標
// 1. 完成資料的渲染 v-for
// 2. 點擊x號 洗掉資料
// 步驟
// 下載axios
// 1. 在App組件頁面引入axios
// 2. 實體化
// data： 創建空陣列,
// methods： 定義要洗掉的第i項
// 3.在 created 發起axios 異步請求
// 渲染資料
// v-for
// 點擊 - ，洗掉元素
// 思路 ：
// 1. 給 x 添加點擊事件
// 2. 在事件的回呼中洗掉books中的資料項
import axios from "axios";
export default {
data() {
return {
books: [],
};
},
methods: {
del(index) {
// 如何去洗掉陣列第i項？
// arr.splice(元素的起點,要洗掉幾項)
this.books.splice(index, 1);
},
},
created() {
axios({
//發起axios異步請求
url: "https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
method: "get",
}).then((res) => {
console.log("請求的資料", res); //請求的資料
this.books = res.data.data;
});
},
};
</script>
<style lang="less" scoped>
h2 {
text-align: center;
}
li {
position: relative;
width: 190px;
height: 240px;
list-style: none;
float: left;
box-shadow: 3px;
}
p {
color: red;
}
img {
width: 180px;
height: 200px;
}
.off {
position: absolute;
right: 20px;
top: 5px;
width: 25px;
height: 25px;
background-color: #ccc;
text-align: center;
border-radius: 15px;
}
.off:hover {
background-color: rgb(238, 14, 14);
}
</style>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305222.html
標籤：其他
上一篇：TensorFlow 從入門到精通（8）—— 模型保存與恢復以及TensorFlow游樂場、Tensorboard