今天练习的购物车案例,界面及功能如下:
功能:全选;删除,计算价格及总价格,商品个别没有被选中,全选按钮取消
自己建的一个json文件
[
{
"isSelect": false,
"imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
"title": "Nodejs权威指南",
"price": 57.8,
"number": 1
},
{
"isSelect": false,
"imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
"title": "Nodejs权威指南",
"price": 57.8,
"number": 2
},
{
"isSelect": false,
"imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
"title": "Nodejs权威指南",
"price": 57.8,
"number": 3
},
{
"isSelect": false,
"imgUrl": "https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
"title": "Nodejs权威指南",
"price": 57.8,
"number": 4
}
]
本案例用axios读取内容,用Bootstrap进行布局
用cnpm口令下载
cnpm install axios --save
cnpm install bootstrap --save
在页面引用
<div id="app">
<div class="container">
<table class="table table-bordered table-hover ">
<tr>
<th>全选:<input type="checkbox" v-model="isAll" @change="selectAll"></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list">
<td><input type="checkbox" v-model="item.isSelect" @change="selectone"></td>
<td>
<img :src="item.imgUrl" alt="">
<span>{{item.title}}</span>
</td>
<td><span>{{item.price}}</span></td>
<td><input type="number" v-model="item.number" min="1"></td>
<td><span>¥{{(item.number*item.price).toFixed(2)}}</span></td>
<td><button class="btn btn-danger" @click="deleteTodo(index)">删除</button></td>
</tr>
<tr>
<!-- 在{{}} 可以使用表达式-->
<td>总价:{{total()}}</td>
</tr>
</table>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
created() {
//不需要调用,页面加载就执行
axios.get("./book.json").then((data) => {
console.log(data);
this.list = data.data
})
},
data: {
list: [],
isAll: false,
},
methods: {
//删除按钮的功能
deleteTodo(ind) {
// 使用filter进行删除操作,过滤掉不满足条件的数据
this.list = this.list.filter((item, index) => {
return index != ind;
})
},
selectone() {
//商品个别没有选中,全选按钮取消选中
this.isAll = this.list.every((item) => {
return item.isSelect == true;
})
},
selectAll() {
//全选按钮选中状态
console.log(this.isAll)
this.list.forEach((item) => {
item.isSelect = this.isAll;
})
},
total() {
//计算商品的总价
return this.list.reduce((tot, item) => {
if (item.isSelect) {
tot += parseFloat((item.price * item.number))
return tot;
}else{
return tot;
}
},0)
}
}
})
</script>
从此案例中得到:
created() {}在这个函数里添加的方法不需要调用,可以立即执行
filter((item, index) => {
}) 这个方法为过滤,过滤掉不满足条件的数据
在此案例中:
deleteTodo(ind) {
// 使用filter进行删除操作,过滤掉不满足条件的数据
this.list = this.list.filter((item, index) => {
return index != ind;
})
},
遍历所有的list,点击的ind=list的index,过滤掉,返回不等于List的index,再加载
selectone() {
//商品个别没有选中,全选按钮取消选中
this.isAll = this.list.every((item) => {
return item.isSelect == true;
})
},
every是vue中的一个方法,每一个都满足条件时,执行的函数
total() {
//计算商品的总价
return this.list.reduce((tot, item) => {
if (item.isSelect) {
tot += parseFloat((item.price * item.number))
return tot;
}else{
return tot;
}
},0)
}
reduce为累加器,两个参数,第一个参数是一个函数,第二个参数是初始值
好好理解这个方法!!