<template>
<div>
<el-row>
<el-col style="width:200px"
:span="8"
v-for="(item, index) in data"
:key="index"
:offset="index > 0 ? 2 : 0">
<div class="del el-icon-circle-close"
@click=del(index)></div>
<el-card shadow="hover"
:body-style="{ padding: '0px' }">
<img :src="item.img"
class="image">
<div style="text-align:center">
<span>{{item.name}}</span>
<div>
<span>{{item.price}}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
data: []
}
},
methods: {
del (index) {
this.data.splice(index, 1)
},
async get () {
const res = await this.$axios({
method: 'get',
url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
})
this.data = res.data.data
}
},
created () {
this.get()
}
}
</script>
<style>
.del {
position: relative;
top: 20px;
left: 176px;
width: 15px;
height: 15px;
border-radius: 50%;
}
.el-icon-circle-close:hover {
cursor: pointer;
color: #fff;
background-color: red;
}
.image {
width: 100%;
display: block;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304777.html
標籤：其他