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 @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