var vm = new Vue({

　　el:"#app",

　　data:{

　　　　totalMoney:0,

　　　　productList:[],

　　　　checkAllFlag:false ，

　　　　delFlag：false

　　　　delOneProduct:[],

　　},

　　filters:{ //局部过滤器 ，调用方法{{number | formatMoney}}

　　　　formatMoney:function(value){

　　　　　　return "$" +value.toFixed(2) //留两位小数

　　　　}

　　},

　　mounted:function(){

　　　　this.$nextTick(function(){//加上这个是确保Vue已经实例化成功

　　　　　　this.cartView();

　　　　})

　　},

　　methonds:{

　　　　cartView:function(){

　　　　　　var _this = this; //因为在查询后的回调里不能保证this代表vue，所以这里要用变量接收一下方便回调里用

　　　　　　this.$http.get("data/cartData.json",{"id":123}).then(function(res){//json可以换成请求后的接口，id为查询的所传的参数没有可以不写

　　　　　　　　_this.productList = res.body.result.list;

　　　　　　})

　　　　　　this.$http.get("data/cartData.json",{"id":123}).then(res=>{//这里是es6的写法除了写法简单外，它还能将作用域变成同一个，所以就不用定义_this变量了

　　　　　　　　this.productList = res.body.result.list;

　　　　　　})

　　　　}，

　　　　changeNum:function(item,way){//数量的加减item代表单条数据，way是加减的标识

　　　　　if(way>0){

　　　　　　　item.number++;　

　　　　　}else{

　　　　　　　item.numer--;

　　　　　　　if(item.number<1){

　　　　　　　　　item.numer = 1;

　　　　　　　}　

　　　　　}　　

　　　　　　calcTotalPrice()　　　

　　　　},

　　　　selectedProduct:function(item){//选择商品(单选),调用:class="{‘check‘:item.checked}" @click = ‘selectedProduct(item)‘

　　　　　　if(typeof item.checked == ‘undefined‘){//判断item里是否存在checked属性，不存在就注册一个。

　　　　　　　　Vue.set(item,"checked",true)//全局注册，默认值为true

　　　　　　　　this.$set(item,‘checked‘,true) //局部注册

　　　　　　}else{

　　　　　　　　item.checked = !item.checked;

　　　　　　}

　　　　　　calcTotalPrice()

　　　　},

　　　　checkAll:function(flag){//全选全不选，全选调用：class="{‘check‘:checkAllFlag}" @click="checkAll(true)";取消调用 @click="checkAll(false)"

　　　　　　this.checkAllFlag = flag;

　　　　　　this.productList.forEach(item,index=>{

　　　　　　　　if(typeof item.checked == ‘undefined‘){

　　　　　　　　　　this.$set(item,"checed",this.checkAllFlag)

　　　　　　　　}else{

　　　　　　　　　　item.checked = this.checkAllFlag 

　　　　　　　　}

　　　　　　calcTotalPrice()

　　　　　　})

　　　　},calcTotalPrice:function(){ 计算总金额

　　　　　　this.totalMoney = 0;

　　　　　　this.productList.forEach(item,index=>{

　　　　　　　　if(item.checked){

　　　　　　　　　　this.totalMoney +=item.productPrice*item.productQuentity;

　　　　　　　　}

　　　　　　})

　　　　}，

　　　　delProduct：function(item){//点击删除弹出是否删除的框

　　　　　　this.delFlag = true;

　　　　　　this.delOneProduct = item;

　　　　}，

　　　　delProduct:function(){//点击是调用的方法

　　　　　　var index = this.productList.indexOf(this.delOneProduct)

　　　　　　 this.productList.splice(index,1); //这里只是界面删除，如果真的想删除需要调后台额删除接口

　　　　　　 this.delFlag = false;

　　　　}

　　}

})

//全局过滤器，可以写在一个工具js里{{numer | money（‘元‘）}}

Vue.filter(‘money‘,function(value,type){ //type是调用的时候传递的参数，没有可以不写

　　return "$" + value.toFixed(2) + type

})

vue界面初始化查询列表的方法之购物车案例