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;
});