2018-09-17vue.js实现购物车效果案例、vue.js

一、简单的购物车案例
body部分：

 <div class="container">
   <table class="table table-bordered text-center">
       <thead>
           <tr>
               <th class="text-center">编号</th>
               <th class="text-center">名称</th>
               <th class="text-center">单价</th>
               <th class="text-center">数量</th>
               <th class="text-center">小计</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for="(value,index) in arr">
               <td>{{index+1}}</td>
               <td>{{value.name}}</td>
               <td>{{value.price}}</td>
      <!-- <td><button>+</button><span>{{value.num}}</span><button>-</button></td>-->
               <td>
                        <button @click="add(index)">-</button>
                       <input type="text" v-model="value.num" style="width:30px">
                       <button @click="alt(index)">+</button>
              </td>
               <td>{{value.price*value.num}}</td>
           </tr>
           <tr>
            <td colspan="5">总价:{{arrs}}</td>
        </tr>
       </tbody>
         
     </table>
  </div>

js部分：

  <script src="js/vue.js"></script>
  <script>
    new Vue({
        el:".container",
        data:{
            arr:[
                {name:'香蕉',price:1,num:1,total:1},
                {name:'苹果',price:2,num:1,total:2},
                {name:'鸭梨',price:3,num:1,total:3}
            ],
            arrs:6
        },
        methods:{
            alt:function(index){
                //1.数量加
               this.arr[index].num++;
            //  2.小计加
                this.arr[index].total=this.arr[index].price*this.arr[index].num
                this.getTotal()
            },
            add:function(index){
               if(this.arr[index].num>1){
            //1. 数量减
                   this.arr[index].num--;
            //    2.小计减
                   this.arr[index].total=this.arr[index].price*this.arr[index].num
               }
                this.getTotal()
            },
            getTotal:function(){
                //总价
                for(var i=0,sum=0;i<this.arr.length;i++){
                    sum+=this.arr[i].total
                }
                this.arrs=sum;
            }
      }
    })
</script>

效果图：

购物车.png

二、选项卡
body部分：

<div id="itany">
   <ul class="list">
       <li v-for='(value,index) in arr' @click='chg(index)'>{{value.name}}</li>
   </ul>
    <ul class="content">
        <li v-for="(value,index) in arr" v-show="value.flag">{{value.cont}}</li>
    </ul>
 </div>

js部分：

<script src="js/vue.js"></script>
<script>
    
    new Vue({
        el:'#itany',
        data:{
           arr:[
               {name:'选项卡一',cont:'这是选项卡一',flag:true},
               {name:'选项卡二',cont:'这是选项卡二',flag:false},
               {name:'选项卡三',cont:'这是选项卡三',flag:false}
           ]
        },
        methods:{
               chg:function(ind){
                for(var i=0;i<this.arr.length;i++){
                    this.arr[i].flag=false;
                }
                this.arr[ind].flag=true;
            }
        }
    })
</script>

css部分：

    <style>
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    a{
        text-decoration:none;
        color:#333;
    }
    li{
        list-style: none;
        
    }
    #itany{
        width:450px;
        margin: 100px auto;
    }
    .list{
        overflow: hidden;
        width:450px;
    }
    .list>li{
        float:left;
        text-align: center;
        font-size:30px;
        width:150px;
        background:red;
    }
    .list>li:nth-child(2){
        background:cyan;
    }
    .list>li:nth-child(3){
        background:yellow;
    }
    
    .content>li{
        width:450px;
        height: 150px;
        line-height: 150px;
        text-align: center;
        border:1px solid #000; 
        background:red;
    }
    .content>li:nth-child(2){
        background:cyan;
    }
    .content>li:nth-child(3){
        background:yellow;
    }
</style>

效果图： 选项卡.png