bootstrap.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
<!-- 引入样式 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<table class="table table-hover table-bordered">
<tr>
<th>全选 <input type="checkbox" v-model="checkAll"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr v-for="(product,index) in products">
<td>
<input type="checkbox" v-model="product.isSelected">
</td>
<td><img :src="product.productCover"></td>
<td>{{product.productPrice}}</td>
<td><input type="number" v-model.number="product.productCount" min="1"></td>
<td>{{product.productPrice*product.productCount | toFixed(2)}}</td>
<td><button class="btn btn-danger" @click=remove(product)>删除</button></td>
</tr>
<tr>
<td colspan="6">总价格:{{sum | | toFixed(2)}}</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
//computed计算属性,如果数据没变,被依赖的数据没变不会重新执行
computed:{
checkAll:{
//当products值变化会重新计算
get(){
return this.products.every(p=>p.isSelected);
},set(val){
this.products.forEach(p=>p.isSelected = val);
}
},
sum:{ //sum的结果会被缓存,如果被依赖的数据没变不会重新执行
get(){
return this.products.reduce((prev,next)=>{
if(!next.isSelected){return prev;} //不勾选的不计算总和
return prev+next.productPrice*next.productCount;
},0);
}
}
},
created(){ //在数据初始化会调用
this.getData();
},
filters:{
toFixed(input,param1){
return '¥'+input.toFixed(param1);
}
},
methods:{
getData(){
const a= [{
"isSelected": false,
"productCover": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=618052011,155537526&fm=27&gp=0.jpg",
"productName": "深入浅出node.js",
"productInfo":"很好的书啊",
"productPrice": 57.8,
"productCount": 1,
"sex":0
}, {
"isSelected": true,
"productCover": "https://avatar.csdn.net/6/3/E/3_q975583865.jpg",
"productName": "深入浅出node.js",
"productInfo": "很好的书啊",
"productPrice": 57.8,
"productCount": 3,
"sex":1
}]
this.products=a;
},
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
remove(p){
this.products = this.products.filter(item=>item!==p);
}
},
data: {
products: [],
}
})
</script>
</body>
</html>