Vuejs에서 장바구니 기능을 구현하는 방법-JS 튜토리얼-php.cn

Vuejs에서 장바구니 기능을 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-05-24 09:20:21

원래의

3319명이 탐색했습니다.

이번에는 Vuejs에서 장바구니 기능을 구현하는 방법을 보여드리겠습니다. Vuejs에서 장바구니 기능을 구현하기 위한 주의사항은 무엇인가요?

프런트엔드 프레임워크 Vue.JS와 관련된 블로그 업데이트를 시작하세요.

기능 개요

Vue.JS에 대한 기본 지식을 배웠고 이제 이러한 기본 지식과 데이터 바인딩을 사용하여 간단한 장바구니 기능을 개발합니다. 기능의 핵심은 다음과 같습니다.
(1) 제품의 이름, 단가 및 수량을 표시합니다.
(2) 제품의 수량을 늘리거나 줄일 수 있습니다.
(3) 제품의 총 가격; 장바구니는 실시간으로 업데이트되어야 합니다. 즉, 수량이 변경되면 총 가격도 그에 따라 변경됩니다.
(4) 장바구니에서 제품을 삭제할 수 있습니다.
(5) 선택 기능이 있습니다. 선택한 상품의 총 가격만 계산합니다.

코드

코드는 HTML, JS, CSS의 세 부분으로 나뉩니다. 핵심은 HTML과 JS입니다.

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Vue 购物车</title>
  <script src="../js/vue.min.js"></script>
  <link href="../css/cart.css" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
  <p id="app" v-cloak>
   <template v-if="list.length">
    <table>
     <thead>
      <tr>
       <th><input type="checkbox" v-on:click="swapCheck" v-model="checked"></th>
       <th>商品名称</th>
       <th>商品单价</th>
       <th>商品数量</th>
       <th>操作</th>
      </tr>      
     </thead>
     <tbody>
      <tr v-for="(item,index) in list">
       <td><input type="checkbox" v-model="selectList" :id="item.id" :value="index" name="selectList" ></td>
       <td>{{ item.name }}</td>
       <td>{{ item.price }}</td>
       <td>
        <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
        {{ item.count }}
        <button @click="handleAdd(index)">+</button>
       </td>
       <td><button @click="handleRemove(index)">移除</button></td>
      </tr>
     </tbody>
    </table>
    <p>总价：￥ {{ totalPrice }}</p>
   </template>
   <p v-else>购物车为空！</p>
  </p>
  <script src="../js/cart.js"></script>
 </body>
</html>

로그인 후 복사

var app = new Vue({
 el:'#app',
 data:{
  list:[
   {
    id:1,
    name:'iPhone 8',
    price:8888,
    count:1
   },
   {
    id:2,
    name:'Huwei Mate10',
    price:6666,
    count:1
   },
   {
    id:3,
    name:'Lenovo',
    price:6588,
    count:1
   }
  ],
  selectList:[],
  checked:false
 },
 computed:{
  totalPrice:function(){
   var total = 0;
   for(var i = 0,len = this.selectList.length;i < len;i++){
    var index = this.selectList[i];
    var item = this.list[index];
    if(item){
     total += item.price * item.count;
    }
    else{
     continue;
    }
   }
   return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
  }
 },
 methods:{
  handleReduce:function(index){
   var item = this.list[index];
   if(item.count < 2){
    return;
   }
   item.count--;
  },
  handleAdd:function(index){
   var item = this.list[index];
   item.count++;
  },
  handleRemove:function(index){
   this.list.splice(index,1);
  },
  swapCheck:function(){
   var selectList = document.getElementsByName('selectList');
   var len = selectList.length;
   if(this.checked){
    for(var i = 0;i < len;i++){
     var item = selectList[i];
     item.checked = false;
    }
    this.checked = false;
    this.selectList = [];
   }
   else{
    for(i = 0;i < len;i++){
     item = selectList[i];
     if(item.checked === false){
      item.checked = true;
      this.selectList.push(selectList[i].value);
     }
    }
    this.checked = true;
   }
  }
 }
});

로그인 후 복사

CSS

[v-cloak]{
 display: none;
}
table{
 border: 1px solid black;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th,td{
 padding: 8px 16px;
 border:1px solid black;
 text-align: center;
}
th{
 background-color: gray;
}

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

위 내용은 Vuejs에서 장바구니 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!