1、预览
2、index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="app"> <!--<h2>{{title}}</h2>--> <li v-for="(item,index) in productList"> <div >产品名称：{{item.productName}}</div> <dd v-for="part in item.parts" v-text="part.partsName"></dd> <div>价格：{{item.productPrice+"--------------------"+index}}</div> <div>数量：{{item.productQuentity}}</div> <div>金额：{{item.productPrice*item.productQuentity | formatMoney}}</div> <div>金额：{{item.productPrice*item.productQuentity | money("元")}}</div> <!--<img src="item.productImage" alt="">--> <!--<img src="{{item.productImage}}" alt="">--> <img v-bind:src="item.productImage" alt=""> <a href="javascript:;" v-on:click="changeMoney(item,-1)">-</a> <a href="javascript:;" @click="changeMoney(item,1)">+</a> <input type="text" value="0" disabled v-model="item.productQuentity"> <!-- v-bind:class="{'check':item.checked}"这里的check用的是单引号--> <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);"> </a> </li> <div> <!--<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAllFlag=true"></span>--> <!--注意不要将true写成ture，还要将div写到vue的作用范围内的div中，即#app这个div中--> <span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true);"></span> <a href="" class="item-del-btn" @click="checkAll(false);">取消全选</a> <div class="item-total"> 总金额 <span class="total-price">{{totalCheckMoney| money("元")}}</span> </div> </div> </div> <script src="js/lib/vue.min.js"></script> <script src="js/lib/vue-resource.min.js"></script> <script src="js/cart.js"></script> </body> </html>
3、cart.js
/** * Created by kk on 2017/4/16. */ new Vue({ el:"#app", data:{ // title:"hello vue" totalMoney:0, productList:[], checkAllFlag:false, totalCheckMoney:0 }, filters:{ formatMoney:function (value) { return "￥"+value.toFixed(2) } }, mounted:function () { //类似于jquery中的ready方法 this.$nextTick(function () { this.cartView(); }) }, methods:{ cartView:function () { // this.title="Vue hello" //var _this=this; // this.$http.get("data/cart.json",{"id":123}).then(function (res) { // _this.productList=res.body.result. productList; // _this.totalMoney=res.body.result.totalMoney; // }); // ES6语法 let _this=this; this.$http.get("data/cart.json",{"id":123}).then(res=> { this.productList=res.body.result. productList; this.totalMoney=res.body.result.totalMoney; }); }, changeMoney:function (product,way) { if(way>0) { product.productQuentity++; } else{ product.productQuentity--; if(product.productQuentity<1){ product.productQuentity=1; } } this.calcTotalPrice(); }, selectedProduct:function (item) { //alert("1"); if(typeof item.checked=="undefined"){ //Vue.set(item,"checked",true);//全局注册checked this.$set(item,"checked",true);//局部注册checked } else { item.checked=!item.checked; } this.calcTotalPrice(); }, checkAll:function (flag) { this.checkAllFlag=flag; var _this=this; this.productList.forEach(function (item,index) { if(typeof item.checked=="undefined"){ _this.$set(item,"checked",_this.checkAllFlag); }else { item.checked=_this.checkAllFlag; } }); this.calcTotalPrice(); }, calcTotalPrice:function () { var _this=this; this.totalCheckMoney=0; this.productList.forEach(function (item, index) { if(item.checked){ _this.totalCheckMoney+=item.productPrice*item.productQuentity; } }) } } }); Vue.filter("money",function (value,type) { return "￥"+value.toFixed(2)+type; });