效果图
点击快速查看
1.初始静态布局源码：
2.最终代码
关键方法解析
filter
foreach
every
reduce
splice
1.初始静态布局源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
*{
padding:0;
margin: 0;
border: 0;
}
#app{
width: 100vw;
height:100vh;
font-size: 12px;
}
table{
border-spacing:0;
width: 400px;
font-size: 12px;
text-align: center;
}
th{
color: darkred;
}
td{
border: 1px solid black;
border-left: 0;
}
td >input{
vertical-align: middle
}
tr{
height: 30px;
}
.cDelect{
display: inline-block;
padding: 2px 4px;
background-color: red;
color: white;
border-radius: 5px;
font-size: 8px;
}
.total{
padding-left: 20px;
padding-top: 10px;
}
.cinput{
width: 50px;
}
</style>
</head>
<body>
<div id="app">
<table >
<tr><th>京东购物车
</th></tr>
<tr><td>全选
<input type="checkbox" /></td>
<td>商品
</td>
<td>商品描述
</td>
<td>价格
</td>
<td>数量
</td>
<td>小计
</td>
<td>操作
</td>
</tr>
<tr v-for="(item,index) of products">
<td><input type="checkbox" /></td>
<td>{{item.name}}
</td>
<td>{{item.detail}}
</td>
<td>{{item.price}}
</td>
<td><input type="number" v-model="item.amount" class="cinput"/></td>
<td>{{Subtotal}}
</td>
<td><span class="cDelect" @click="handleDelect">删除
</span></td>
</tr>
</table>
<div class="total">
总计
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
products:[
{id:1,name:'html',detail:'html入门课程',price:45,amount:5,isSelected:false},
{id:2,name:'css',detail:'css入门课程',price:39,amount:5,isSelected:false},
]
}
})
</script>
</body>
</html>
2.购物车最终代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
*{
padding:0;
margin: 0;
border: 0;
}
#app{
width: 100vw;
height:100vh;
font-size: 12px;
}
table{
border-spacing:0;
width: 400px;
font-size: 12px;
text-align: center;
}
th{
color: darkred;
}
td{
border: 1px solid black;
border-left: 0;
}
td >input{
vertical-align: middle
}
tr{
height: 30px;
}
.cDelect{
display: inline-block;
padding: 2px 4px;
background-color: red;
color: white;
border-radius: 5px;
font-size: 8px;
}
.cDelect:hover{
cursor: pointer;
}
.total{
padding-left: 20px;
padding-top: 10px;
}
.cinput{
width: 50px;
}
</style>
</head>
<body>
<div id="app">
<table >
<tr><th>京东购物车
</th></tr>
<tr><td>全选
<input type="checkbox" v-model='all' @change="handleAll"/></td>
<td>商品
</td>
<td>商品描述
</td>
<td>价格
</td>
<td>数量
</td>
<td>小计
</td>
<td>操作
</td>
</tr>
<tr v-for="(product,index) of products">
<td><input type="checkbox" v-model="product.isSelected" @change="handleSingle"/></td>
<td>{{product.name}}
</td>
<td>{{product.detail}}
</td>
<td>{{product.price|unit}}
</td>
<td><input type="number" v-model="product.amount" class="cinput"/></td>
<td>{{product.price*product.amount}}
</td>
<td><span class="cDelect" @click="handleDelect(index)">删除
</span></td>
</tr>
</table>
<div class="total">
总计{{total|unit}}
</div>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
filters:{
unit:function(value){
return "￥"+value+'元';
}
},
computed:{
total:function(){
return this.products.reduce((pre,next)=>{
return pre + (next.isSelected?next.price*next.amount:0)
},0)
}
},
data:{
all:false,
products:[
{id:1,name:'html',detail:'html入门课程',price:45,amount:0,isSelected:false},
{id:2,name:'css',detail:'css入门课程',price:39,amount:0,isSelected:false},
]
},
methods:{
handleDelect:function(i){
this.products.splice(i,1);
},
handleAll(){
this.products.forEach((product)=>{
product.isSelected=this.all;
})
},
handleSingle(){
this.all=this.products.every(product=>{
return product.isSelected
})
}
}
})
</script>
</body>
</html>
案例方法汇总
filter
是vue过滤属性，主要作用是对结果格式化,不影响数据本身,只会影响在页面上的展示效果，如给我们的价格添加单位，定义好后，只需要在渲染的数据后面加上管道符|即可生效。
foreach
遍历数组的每一项
every
当每一项的状态一样的时候,才返回当前的状态值
reduce
累加 将数组的每一项指定的内容相加
splice
删除数组的某一项
回到顶部
