模拟json数据
[
{
"isSelected":true,
"image":"https://img10.360buyimg.com/cms/s80x80_jfs/t1/25474/2/7242/163408/5c6a2aacE4a9b5d08/f40901e59808caae.jpg",
"title":"【官方正品 品牌直营】【精选优质反绒皮 加绒可选】专柜同款原装直邮 品质",
"desc":"颜色：灰色-四季尺码 ：#42",
"price":120.12321,
"num":3
},
{
"isSelected":true,
"image":"https://img10.360buyimg.com/cms/s80x80_jfs/t1/25474/2/7242/163408/5c6a2aacE4a9b5d08/f40901e59808caae.jpg",
"title":"【官方正品 品牌直营】【精选优质反绒皮 加绒可选】专柜同款原装直邮 品质",
"desc":"颜色：灰色-四季尺码 ：#42",
"price":120,
"num":5
}
]
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<div class="rows">
<table class="table table-bordered">
<caption><h1>购物商场</h1> </caption>
<tr>
<td><input type="checkbox" v-model="changeAll">全选</td>
<td>商品</td>
<td>描述</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<td><button class="btn btn-danger">操作</button></td>
</tr>
<tr v-for="(produce,index) in produces">
<td><input type="checkbox" v-model="produce.isSelected" ></td>
<td>
<img :src="produce.image" >
{
{produce.title}}
</td>
<td>{
{produce.desc}}</td>
<td>{
{produce.price | toFixed(2) }}</td>
<td><input type="number" v-model.number="produce.num"></td>
<td>{
{produce.price*produce.num | toFixed(2)}}</td>
<td><button class="btn btn-danger" @click="del(produce)">删除</button></td>
</tr>
<tr>
<td callspan="6">总价：{
{sum | toFixed(2) }}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
produces:[],
},
methods:{
del(produce){ //传递要删除的商品，然后根据商品在数组中查询，并且删除，
this.produces=this.produces.filter(item=>item!==produce);
},
getData(){
axios.get('./cart.json').then(res=>{//成功
this.produces = res.data;
},err=>{//失败
console.log(err);
})
}
},
created(){ //这个方法在数据被初始化后调用
this.getData();
},
filters:{
toFixed(input,param1){ //过滤器，其实也就是一个简单的方法，没有什么两样，，
return input.toFixed(param1);
}
},
computed:{
changeAll:{
get(){
return this.produces.every(p=>p.isSelected)
},
set(val){
this.produces.forEach(p=>p.isSelected=val)
}
},
sum:{
get(){
return this.produces.reduce((prev,next)=>{
if(!next.isSelected){
return prev
}
return prev+next.price*next.num;
},0)
}
}
}
})
</script>
</html>