1.data/carts.json
[
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33510542.jpg",
"productName": "纸上行舟",
"productInfo": "青年作者黎幺短篇小说首度结集",
"productPrice": 57.33,
"productCount": 3,
"id": "0001"
},
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33497735.jpg",
"productName": "我可能得抑郁症了!舟",
"productInfo": "青年作者黎幺短篇小说首度结集",
"productPrice": 54.26,
"productCount": 2,
"id": "0002"
},
{
"isSelected": true,
"productCover": "https://img3.doubanio.com/view/subject/m/public/s33474961.jpg",
"productName": "绕日飞行",
"productInfo": "驯马、飞行、成长、爱情",
"productPrice": 22.67,
"productCount": 3,
"id": "0003"
}
]
2..html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name=referrer content=never>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
<style>
.img{
width: 30px;
height: 50px;
}
.name{
font-size: 13px;
}
.number{
width: 40px;
}
.delete{
width: 70px;
height: 40px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app" class="container">
<h2 class="text-center text-success">购物车</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>全选 <input type="checkbox" v-model="checkAll" @change="change"></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item of products">
<td> <input type="checkbox" v-model="item.isSelected" @change="handleItem"></td>
<td class="name"><img class="img" :src="item.productCover" alt=""></img>{{item.productName}}</td>
<td>{{item.productPrice}}</td>
<td><input type="number" class="number" min="1" v-model.number="item.productCount"></td>
<td>{{item.productPrice*item.productCount | format(2)}}</td>
<td><button class="delete btn-danger" @click="handleDelete(item)">删除</button></td>
</tr>
</tbody>
</table>
<p class="text-left">总价格:{{sum() | format(2)}}</p>
</div>
<script>
/* ctrl+shift+p */
var vm=new Vue({
el:"#app",
data:{
products:[],
checkAll:false,
check:false,
},
//页面装载时执行
mounted() {
axios.get('./data/carts.json').then(res=>{
return this.products=res.data;
})
this.handleItem() //进入这个函数时就执行一下handleItem()
},
filters:{
/* val就是msg params就是管道修饰符("|")后面函数传递过来的参数*/
format(val,params){
return "$"+val.toFixed(params);
}
},
methods: {
change(){
this.products.forEach(item=>item.isSelected=this.checkAll)
},
handleItem(val){
this.checkAll=this.products.every(item=>item.isSelected)
},
//总价求和
sum(){
var total=0;
this.products.forEach(item=>{
total=item['productPrice']*item['productCount']+total
})
return total
},
//点击删除
handleDelete(item){
var products=this.products.filter(value=>value!==item);
this.products=products
}
},
})
</script>
</body>
</html>
3.使用Go Live查看效果