购物车

最新推荐文章于 2024-11-13 17:27:29 发布

chuyi4253

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量157

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/u/3786589/blog/1787333

版权

vue1.html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

</head>
<style>

</style>
<body>
<div id="app">

       <div style="float:left;margin-right:20px;">
           <input type="checkbox" :checked="car.checked" v-on:click="selectOne(car)">
           <image style="width:50px;height:50px;" :src="car.shopImage" />
       </div>
       <div style="">
           <div>
               <a>{{car.shopName}}</a>
           </div>
           <div>
               <a style="margin-right:370px;">{{car.shopPrice |moneyFormat(car.shopPrice)}}</a>
               <a>{{car.shopPrice*car.shopNumber |moneyFormat(car.shopPrice*car.shopNumber)}}</a>
           </div>
           <div>
               <span v-on:click="sub(index)">-</span>
               <input style="width:30px;" type="tel" :value="car.shopNumber"/>
               <span style="margin-right:330px;" v-on:click="add(index)">+</span>
               <a>删除</a>
           </div>
       </div>
   </div>

</div>
<input type="checkbox" :checked="checkAll" v-on:click="selectAll(checkAll)"/>合计:{{totalPrice |moneyFormat(totalPrice)}}
<button>去结算</button>

</div>
<script src="vue.min.js"></script>
<script src="vue-resource.js"></script>
<script src="vue1.js"></script>

</body>
</html>

vue1.js代码

var vm=new Vue({
   el:"#app",
   data:{
       shopListArr:[],
       checkAll:false,
       totalPrice:0,
   },
   mounted:function(){

       this.getLocalData();

   },
   //过滤器
   filters:{
       moneyFormat:function(money){
           return '￥'+money.toFixed(2);
       }
   },
   methods:{
       //请求数据
       getLocalData:function(){

this.$http.post("car.json").then(function(res){

var ress=eval('('+res.bodyText+')');
console.log(ress.allShops.shopList);

                       this.shopListArr=ress.allShops.shopList;

               },function(){
                   alert("链接失败");
               });
           },
           //加数量
       add:function(index){
           this.shopListArr[index].shopNumber+=1;
           this.Price();
       },
       //减数量
       sub:function(index){
           if(this.shopListArr[index].shopNumber>1){
               this.shopListArr[index].shopNumber-=1;
           }
           this.Price();

       },
       //全选框
       selectAll:function(flag){
           this.checkAll=!flag;
           this.shopListArr.forEach(function(value,index){
               if(typeof value.checked==='undefind'){
                   this.$set(value,'checked',!flage);
               }else{
                   value.checked=!flag;
               }
           });
           this.Price();

       },
       //控制单选按钮
       selectOne:function(car){

               if(typeof car.checked==='undefind'){
                   this.$set(value,'checked',true)
               }else{
                   car.checked=!car.checked;
               }


           this.Price();
           this.hasSelectAll();
       },
       //判断单选框是否全部选中
       hasSelectAll:function(){
           var flag=true;
           this.shopListArr.forEach(function(value,index){
               if(!value.checked){
                   flag=false;
               }
           });
           this.checkAll=flag;
       },
       //计算总价
       Price:function(){
           var all=0;
           this.shopListArr.forEach(function(value,index){

                   if(value.checked==true){
                       all+=parseFloat(value.shopPrice)*parseFloat(value.shopNumber);
                   }




           });

           this.totalPrice=all;

       }

}

})

car.json数据

{
   "allShops":{
       "totalMoney":0,
       "shopList":[
           {
               "shopId":"1001",
               "shopName":"【京东joy联名款】小胜儿童智能机器人早教语音对话聊天声控音乐故事机远",
               "shopPrice":698.00,
               "shopNumber":1,
               "shopImage":"car.jpg"

           },
           {
               "shopId":"1002",
               "shopName":"dostyle DM210 21.5英寸LED背光全高清纤薄显示器(原装广视角VA面板 ",
               "shopPrice":579.00,
               "shopNumber":1,
               "shopImage":"car2.jpg"

           },
           {
               "shopId":"1002",
               "shopName":"德芙Dove巧克力分享碗装什锦牛奶榛仁葡萄干巧克力糖果巧克力",
               "shopPrice":29.90,
               "shopNumber":1,
               "shopImage":"car3.jpg"

           },
       ]
   }

}所以的图片都放在代码所放的文件，