欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)簡易購物車頁面

 更新時間:2020年12月30日 10:09:03   作者:小王同學Max  
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易購物車頁面,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

VUE實現(xiàn)簡易購物車效果,供大家參考,具體內容如下

簡易的購物車小demo

引用了一下bootstrap3,的表格

<section id="gouwuche">
 
 <table class="table table-hover">
 <thead>
  <tr>
  <th>
  <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/>
  全選
  </th>
  <th>商品信息</th>
  <th>單價</th>
  <th>數(shù)量</th>
  <th>金額</th>
  <th>操作</th>
  </tr>
 </thead>
 <tbody>
  <tr style="height:50px;"></tr>
  <tr v-for="(date,index) in arr" :class="{bgcolor:isActive}">
  <td>
  <input type="checkbox" v-model="checkgroup" :value="date" @change="handleLiChange" />
  <img :src="date.imges"/>
  {{date.name}}
  </td>
  <td>
  <p>{{date.networkType}}</p>
  <p>{{date.colorClass}}</p>
  <p>{{date.packageType}}</p>
  <p>{{date.rom}}</p>
  <p>{{date.purchaseMethod}}</p>
  <br>
  </td>
  <td>
  <p><b class="danjia">{{date.price}}</b></p>
  </td>
  <td>
  <button @click="handleDelclike(date)" >-</button>
  <input type="text" :value="date.numbers"/>
  <button @click="date.numbers++">+</button>
  </td>
  <td>
  <p><b class="jiner">{{getSumje(date)}}.00</b></p>
  </td>
  <td>
  <p>移入收藏夾</p>
  <a href="#" @click="rmove(index)">刪除</a>
  </td>
  </tr>
 </tbody>
 </table>
 
 <div class="box">
 <div class="boxa">
  <input type="checkbox" @change="handlechange" v-model="isAllChange" @click='inshow()'/>
  <a href="#" >全選</a>
  <a href="#" >刪除</a>
 </div>
 <div class="boxc">
  <p>已選商品:<b class="jiner">{{checkgroup.length}}</b></p>
  <p>合計(不含運費):<b class="jiner">{{getSum()}}<b></p>
 </div>
 <div class="boxb" >
  結算
 </div>
 </div>
</section>

CSS:

#gouwuche {
 width: 1200px;
 height: ;
 margin: 0 auto;
}

.box {
 width: 1200px;
 height: 50px;
 margin: 30px auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background-color: #C4E3F3;
}

.boxa {
 width: 780px;
 height: 50px;
}

.boxa a {
 margin-right: 50px;
}

.boxb {
 width: 120px;
 height: 50px;
 background-color: #C0C0C0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-size: 18px;
}

.boxc {
 width: 300px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

input {
 width: 50px;
 text-align: center;
}

img {
 width: 60px;
 height: 60px;
}

a {
 text-decoration: none;
 color: #000;
}

* {
 font-size: 12px;
}

p {
 margin: 0;
 padding: 0;
 line-height: 1.9;
}

.danjia {
 font-size: 16px;
}

.jiner {
 font-size: 18px;
 color: #FF8C00;
}
.bgcolor{
 background-color: rgba(205,205,205,0.2);
 
}

js:

var gouwuche = new Vue({
 el:"#gouwuche",
 data:{
 checkgroup:[],
 isAllChage:false,
 isActive:false,
 arr:[
 {
  //商品名
  name:"小米 note8 Pro",
  //圖片地址
  imges:"img/t1.jpg",
  //顏色分類
  colorClass:"機身顏色:冰翡翠",
  //網絡類型
  networkType:"網絡類型:4G+全網通",
  //套餐類型
  packageType:"套餐類型:官方標配",
  //存儲容量
  rom:"存儲容量:6+128GB",
  //購買方式
  purchaseMethod:"官方旗艦店",
  //單價
  price:1299.00,
  //數(shù)量
  numbers:1,
  //金額
  money:1299.00,
  //索引
  id:"1",
 },
 {
  //商品名
  name:"紅米 k30 5G",
  //圖片地址
  imges:"img/t3.jpg",
  //顏色分類
  colorClass:"機身顏色:紫玉幻境",
  //網絡類型
  networkType:"網絡類型:5G+全網通",
  //套餐類型
  packageType:"套餐類型:官方標配",
  //存儲容量
  rom:"存儲容量:8+128GB",
  //購買方式
  purchaseMethod:"官方旗艦店",
  //單價
  price:1499.00,
  //數(shù)量
  numbers:1,
  //金額
  money:1499.00,
  //索引
  id:"2",
 },
 {
  //商品名
  name:"紅米 k30 Pro",
  //圖片地址
  imges:"img/t4.jpg",
  //顏色分類
  colorClass:"機身顏色:象牙白",
  //網絡類型
  networkType:"網絡類型:5G+全網通",
  //套餐類型
  packageType:"套餐類型:官方標配",
  //存儲容量
  rom:"存儲容量:8+256GB",
  //購買方式
  purchaseMethod:"官方旗艦店",
  //單價
  price:3999.00,
  //數(shù)量
  numbers:1,
  //金額
  money:3999.00,
  //索引
  id:"3",
 },
 {
  //商品名
  name:"紅米 k20 Pro",
  //圖片地址
  imges:"img/t4.jpg",
  //顏色分類
  colorClass:"機身顏色:象牙白",
  //網絡類型
  networkType:"網絡類型:5G+全網通",
  //套餐類型
  packageType:"套餐類型:官方標配",
  //存儲容量
  rom:"存儲容量:8+256GB",
  //購買方式
  purchaseMethod:"官方旗艦店",
  //單價
  price:3999.00,
  //數(shù)量
  numbers:1,
  //金額
  money:3999.00,
  //索引
  id:"3",
 }
 ],
 },
 
 methods:{
 
 inshow:function(){
  this.isActive = !this.isActive;
 },
 
    //總額
 getSum:function(){
  var sum = 0;
  for(var i in this.checkgroup){
  sum += this.checkgroup[i].numbers * this.checkgroup[i].price;
  }
  return sum;
 },
 
    //單品總額
 getSumje:function(date){
  var sum = date.price;
  sum *= date.numbers;
  return sum;
 },
 
    //判斷全選框
 handlechange:function(){
  if(this.isAllChange){
  this.checkgroup = this.arr;
  }else{
  this.checkgroup = [];
  }
 },
 
    //判斷全選框
 handleLiChange:function(){
  if(this.checkgroup.length !== this.arr.length){
  this.isAllChange = false;
  }else{
  this.isAllChange = true;
  }
 },
 
    //數(shù)量減1
 handleDelclike:function(date){
  var numbers = date.numbers--;
  if(numbers === 1){
  date.numbers = 1;
  }
 },
 
    //刪除
 rmove:function(index){
  var that = this;
  that.arr.splice(index,1);
  that.checkgroup.splice(index,1);
  

 }
 
 }
 
})

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 在vue中使用SockJS實現(xiàn)webSocket通信的過程

    在vue中使用SockJS實現(xiàn)webSocket通信的過程

    最近接到一個業(yè)務需求,需要做一個聊天信息的實時展示的界面,下面小編把實現(xiàn)過程記錄下來,對vue中使用SockJS實現(xiàn)webSocket通信的相關知識感興趣的朋友一起看看吧
    2018-08-08
  • Nginx配置Vue項目,無法按路徑跳轉及刷新404的解決方案

    Nginx配置Vue項目,無法按路徑跳轉及刷新404的解決方案

    這篇文章主要介紹了Nginx配置Vue項目,無法按路徑跳轉及刷新404的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • vue3組合式api實現(xiàn)v-lazy圖片懶加載的方法實例

    vue3組合式api實現(xiàn)v-lazy圖片懶加載的方法實例

    vue作為前端主流的3大框架之一,目前在國內有著非常廣泛的應用,下面這篇文章主要給大家介紹了關于vue3組合式api實現(xiàn)v-lazy圖片懶加載的相關資料,需要的朋友可以參考下
    2022-09-09
  • vue中設置、獲取、刪除cookie的方法

    vue中設置、獲取、刪除cookie的方法

    今天小編就為大家分享一篇vue中設置、獲取、刪除cookie的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 解讀Vue組件注冊方式

    解讀Vue組件注冊方式

    無論是Vue還是React,都有組件的概念。組件,就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中,將一個頁面劃分成一個個小的模塊,每個模塊單獨定義,每個模塊就是一個組件。組件可以進行復用,A頁面和B頁面有一個相似的模塊,可以抽離成一個可局部修改的組件。
    2021-05-05
  • VScode格式化ESlint方法(最全最好用方法)

    VScode格式化ESlint方法(最全最好用方法)

    這篇文章主要介紹了VScode格式化ESlint方法(最全最好用方法),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-09-09
  • element-ui 關于獲取select 的label值方法

    element-ui 關于獲取select 的label值方法

    今天小編就為大家分享一篇element-ui 關于獲取select 的label值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue3與elementui封裝一個便捷Loading

    vue3與elementui封裝一個便捷Loading

    這篇文章主要介紹了vue3與elementui封裝一個便捷Loading,,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-09-09
  • Vue導出json數(shù)據(jù)到Excel電子表格的示例

    Vue導出json數(shù)據(jù)到Excel電子表格的示例

    本篇主要介紹了Vue導出json數(shù)據(jù)到Excel電子表格的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue.js實現(xiàn)立體計算器

    Vue.js實現(xiàn)立體計算器

    這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)立體計算器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02

最新評論