vue.js 단순 카 트 기능 실현

5167 단어 vue.js쇼핑 카 트
본 논문 의 사례 는 vue.js 가 간단 한 카 트 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
이번 에는 vue.js 가 카 트 를 실현 하 는 작은 프로젝트 를 가 져 다 드 리 겠 습 니 다.부족 하 다 면 엄 격 히 지적 해 주세요.
카 트 기능 은 일부 상품 을 선택 하고 선택 하 며 상품 의 총 가격 계산,상품 제거,구 매 수량 조정 등 기능 이 있다.
js 는 주로 다음 과 같은 방법 이 있다.
함수 추가,감 함수,수 동 수정 수량 판단 재고 함수,총 가격 계산 함수,단일 이벤트,전체 이벤트,총 6 개 이벤트 로 나 뉜 다.
구체 적 인 효 과 는 아래 그림 과 같다.

코드 여기 있 습 니 다.
main.js

'use strict'
 
var app = new Vue({
 el: '#app',
 data: {
 list: [
  {
  id: 1,
  name: 'iPhone 7',
  price: 6188,
  count: 1,
  check: true,
  },
  {
  id: 2,
  name: 'iPad Pro',
  price: 5888,
  count: 1,
  check: false,
  },
  {
  id: 3,
  name: 'MacBook Pro',
  price: 21488,
  count: 1,
  check: true,
  },
 ]
 },
 methods: {
 remove: function (index) { //    
  this.list.splice(index, 1);
 },
 reduce: function (index) { //    
  this.list[index].count --;
 },
 add: function (index) { //    
  this.list[index].count ++;
 },
 selAll: function () { //    
  let isAll = document.querySelector('#all');
 
  if (isAll.checked == true) {
  this.list.forEach(function(item, index) {
   item.check = true;
  }) 
  } else {
  this.list.forEach(function(item, index) {
   item.check = false;
  }) 
  }
 }
 },
 computed: {
 totalPrices: function () { //    
  let totalPrices = 0;
 
  this.list.forEach(function (val, index) {
  if (val.check == true)
   totalPrices += parseFloat(val.price * val.count);
  })
 
  return totalPrices.toString().replace(/\B(?=(\d{3})+$)/g, ','); //         ‘，'
 }
 }
})
index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="main.css" >
</head>
<body>
<div id="app" v-cloak>
 <template v-if="list.length">
 <table>
  <thead>
  <tr>
   <th>  <input id="all" @click="selAll" type="checkbox" checked></th>
   <th>    </th>
   <th>    </th>
   <th>    </th>
   <th>  </th>
  </tr>
  </thead>
  <tbody>
  <template v-for="(item, index) in list">
   <tr>
   <td>
    <input type="checkbox" :checked="item.check" @click="item.check = !item.check">
   </td>
   <td>
    {{ item.name }}
   </td>
   <td>
    {{ item.price }}
   </td>
   <td>
    <button @click="reduce(index)" :disabled="item.count == 1">-</button>
    {{ item.count }}
    <button @click="add(index)">+</button>    
   </td>
   <td>
    <button @click="remove(index)">  </button>
   </td>
   </tr>
  </template>
  </tbody>
 </table>
 <div>  : ￥ {{ totalPrices }}</div>
 </template>
 <template v-else>
        
 </template>
</div>
 
<script src="vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.css

[v-cloak] {
 display: none; 
}
 
#app {
 width: 500px;
 margin: 0 auto;
}
 
table {
 width: 100%;
 border: 1px solid #444;
 border-collapse: collapse;
}
 
th, td {
 padding: 8px 16px;
 border: 1px solid #444;
 text-align: left;
}
 
th {
 background: #89abd3;
 color: rgb(214, 224, 235);
 font-weight: 600;
 white-space: nowrap;
}
더 많은 글 은Vue.js 전단 구성 요소 학습 튜 토리 얼을 클릭 하여 읽 기 를 배 울 수 있다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
asp 아래 HTTP 통과USER_AGENT 는 사용자 가 휴대 전화 로 방문 하 는 지,컴퓨터 IE 로 방문 하 는 지 판단 합 니 다.
vue 카 트 사례 실현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage