<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!--boostrap 栅格化布局 默认12列 有一些框架可能是24列-->
<!--常见样式 基本样式+增强样式-->
<!-- -->
<div class="container">
<!--每一行又会拥有12列-->
<div class="row">
<table class="table table-hover table-bordered">
<caption style="font-size:40px;text-align:center;" class="text-success">购物车</caption>
<tr>
<!--click点击时 checkbox状态还没有改变,所以拿到的是相反-->
<!--不用click而用change change保证只当值变化的时候执行函数-->
<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" @change="change">
<!--v-bind:src也可以缩写为:src 动态绑定指令-->
</td>
<td><img style="margin-left:30px" width="100px" height="100px" :src="product.producteImg" :title="product.productName" >{{product.productName}}</td>
<!--属性中用冒号取，属性外用{{}}取-->
<td>{{product.productPrice | toFixed(2)}}</td>
<!--.number是让输入框的值编程数字类型，lazy当输入框失去焦点的时候更新-->
<td><input type="number" v-model="product.productCount" style="width:50px;"></td>
<!--过滤器 原数据不变的情况下 只是改变显示的效果 管道符|-->
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button class="btn btn-danger" style="text-size:20px;" v-on:click="del(index)">删除</button></td>
</tr>
<tr>
<!--数据一变化就会重新调用这个函数算出新的结果,不会缓存上一步结果-->
<td colspan="6" style="text-align:right;font-size:20px">总价:{{sumall | toFixed(2)}}</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="pro.json"></script>
<script>
let vm=new Vue(
{
el:"#app",
// 当给全选赋值时，要影响其他人的变化，当页面刷新时，我们获取全选值，是根据下面的checkbox计算出的结果给全选赋值 Object.defineProperty
computed:{
//放在computed中最后也会放在vm上，不能喝methods和data重名
checkAll:{
get(){
//this依旧指向实例 默认v-model会获取checkAll的值，所以会调用get方法
//放product值会重新计算
return this.products.every(item=>item.isselected)
},
set(val){
//当我们给checkbox赋值的时候
this.products.forEach((item)=>{item.isselected=val;})
}
},
sumall:{
//如果计算属性写成函数，默认调用get方法
get(){
//如果依赖的数据没有变化就不会重新执行
selectproducts=this.products.filter(item=>item.isselected)
console.log(selectproducts)
return selectproducts.reduce((prev,next)=>{ return prev+next.productCount*next.productPrice;},0)
},
set(){}
}
},
filters:{//可以有好多自定义过滤器
toFixed(input,parma){//这里的this是window
return '￥'+input.toFixed(parma);
}
},
created(){
//在数据被初始化后调用
//在这个例子中就是products，this指向VM实例
//钩子函数
//也可以拿到method中的方法
//专门用来发送ajax的方法
axios.get("./pro.json").then(
data=>{this.products=data.data;console.log(data.data)},
//这里不能回调函数中this，回调函数的this指向window
//但是箭头函数的this指向的是实例
//在chrome浏览器属性 目标那里最后加上 --allow-file-access-from-files 否则不能本地ajax
err=>{alert("失败了")})
//基于promise的
},
methods:{
del(ind){
this.products=this.products.filter((item,index)=>ind!=index)
},
change(){
this.check=this.products.every(item=>item.isselected)
},
},
data:{
products:[],
check:false,
sum:0
}
}
)
</script>
</body>
</html>
网友评论