Vue 카 트 기본 기능 구현

8739 단어 vue쇼핑 카 트
Vue 카 트 상품 추가,감소,단일 선택,전체 선택,삭제,가격 업데이트 등 기능 실현


Dome 과 Vue 코드

<!DOCTYPE html>
<html>

 <head>
 <meta charset="utf-8">
 <title>  </title>
 <link rel="stylesheet" href="./css/common.css" >
 <link rel="stylesheet" href="./css/cart.css" >
 </head>
 <body>
 <div id="main">
 <div class="container">
 <div id="cart">
 <h1>   </h1>
 <form action="#" method="post">
 <table class="form">
 <thead>
 <tr>
 <th width="8%">  </th>
 <th width="50%">  </th>
 <th width="13%">  （ ）</th>
 <th width="15%">  </th>
 <th width="14%">  （ ）</th>
 </tr>
 </thead>
 <tbody id="cart-goods-list">
 <tr v-for="cart in productList">
 <td>
 <input type="checkbox" name="good-id" :value="1" v-model="cart.select">
 </td>
 <td class="goods">
 <div class="goods-image">
 <img v-bind:src="cart.pro_img">
 </div>
 <div class="goods-information">
 <h3>{{cart.pro_name}}</h3>
 <ul>
 <li>{{cart.pro_purity}}</li>
 <li>{{cart.pro_service}}</li>
 </ul>
 </div>
 </td>
 <td>
 <span class="price">￥<em class="price-em">{{cart.pro_price.toFixed(2)}}</em></span>
 </td>
 <td>
 <div class="combo">
 <input type="button" name="minus" value="-" class="combo-minus" @click="cart.pro_num<2?cart.pro_num=1:cart.pro_num--">
 <input type="text" name="count" v-model.number="cart.pro_num" class="combo-value">
 <input type="button" name="plus" value="+" class="combo-plus" v-on:click="cart.pro_num++">
 </div>
 </td>
 <td>
 <strong class="amount">￥<em class="amount-em">{{(cart.pro_price*cart.pro_num).toFixed(2)}}</em></strong>
 </td>
 </tr>
 </tbody>
 <tfoot v-show="productList.length!=0">
 <tr>
 <td colspan="2">
 <label>
   <input type="checkbox" name="all" v-model="isSelectAll">
   <span @click="">  </span>
   </label>
 <a href="#" rel="external nofollow" id="cart-delete" @click="del()">  </a>
 </td>
 <td colspan="3">
 <span>  ：</span>
 <strong id="total-amount">￥<em id="total-amount-em">{{getTotal}}</em></strong>
 <input type="submit" value="    " id="settlement">
 </td>
 </tr>
 </tfoot>

 </table>
 </form>
 <div v-show="productList.length===0">
         ~     ~
 </div>
 </div>
 </div>
 </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
 el:"#cart",
 data:{
 productList:[
 {
 'pro_name': 'Dior                ',//    
 'pro_purity': '50ml',//  
 'pro_service': "   7      ",//  
 'pro_num': 1,//  
 'pro_img': 'img/1.jpg',//    
 'pro_price': 498,//  ,
 'select': true ,//    
 },
 {
 'pro_name': '  （dior）  CD      ',//    
 'pro_purity': '350g',//  
 'pro_service': "   7      ",//  
 'pro_num': 1,//  
 'pro_img': 'img/2.jpg',//    
 'pro_price': 268,//  
 'select': true //    
 },
 {
 'pro_name': 'LANCÔME             ',//    
 'pro_purity': '50ml',//  
 'pro_service': "   7      ",//  
 'pro_num': 1,//  
 'pro_img': 'img/3.jpg',//    
 'pro_price': 598,//  
 'select': true //    
 }
 ]
 },
 computed:{
 getTotal:function(){
 var newArr=this.productList.filter(function(val){
 return val.select===true;
 })
 var price=0;
 for(var i=0;i<newArr.length;i++){
 price+=newArr[i].pro_num*newArr[i].pro_price
 }
 return price.toFixed(2)
 },
 isSelectAll:{
 get:function(){
 return this.productList.every(function(val){
 return val.select===true;
 })
 },
 set:function(newValue){
 for(var i=0;i<this.productList.length;i++){
 this.productList[i].select=newValue;
 }
 }
 }
 },
 methods:{
 del:function(){
 if(confirm("      ")){
 var newArr=[];
 for(var i=0;i<this.productList.length;i++){
 if(this.productList[i].select===false){
 newArr.push(this.productList[i])
 }
 }
 this.productList=newArr;
 }
 }
 }
 
 })
 </script>
</html>
카 트 부분 CSS 코드

@charset "utf-8";

#main{
 padding: 30px 0px;
}

#cart{
 background: #FFFFFF;
 padding: 40px;
}

#cart h1{
 line-height: 40px;
 padding: 0px 0px 10px 0px;
}

table.form{
 border-collapse: collapse;
 empty-cells: show;
 margin: 20px 0px;
 padding: 0px;
 table-layout: fixed;
 width: 100%;
}

table.form th,
table.form td{
 border-bottom: 1px solid #DDDDDD;
 padding: 15px 10px;
 text-align: left;
}

table.form{
 border-top: 3px solid #DDDDDD;
}

.goods .goods-image img{
 border: 1px solid #DDDDDD;
 float: left;
 height: 100px;
 margin: 0px 20px 0px 0px;
}

.goods .goods-information{
 float: left;
}

.goods .goods-information ul{
 color: #666666;
 font-size: 12px;
 line-height: 20px;
 margin:10px 0px 0px 0px;
}

.price,
.amount,
#total-amount{
 color: #E00000;
}

#total-amount{
 font-size: 22px;
}

.price em,
.amount em,
#total-amount em{
 font-style: normal;
}

.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
 background: #FFFFFF;
 border: 1px solid #DDDDDD;
 color: #333333;
 float: left;
 font-weight: bold;
 margin: 0px;
 outline: none;
 text-align: center;
}

.combo .combo-minus,
.combo .combo-plus{
 font-size: 16px;
 height: 26px;
 line-height: 26px;
 padding: 0px;
 width: 24px;
}

.combo .combo-value{
 border-left: none;
 border-right: none;
 height: 20px;
 line-height: 20px;
 padding: 2px;
 width: 40px;
}

#cart-delete{
 margin-left: 20px;
}

#settlement{
 background: #E00000;
 border: none;
 color: #FFFFFF;
 float: right;
 font-size: 16px;
 height: 40px;
 line-height: 40px;
 margin: 0px;
 outline: none;
 padding: 0px;
 width: 160px;
}
주:CSS 스타일 코드 가 너무 많아 서 위 에서 다 주지 않 고 주요 코드 만 주 었 습 니 다.젊은이 들 은 실제 상황 에 따라 스타일 을 수정 할 수 있다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
천의 비 즈 니스 시스템 백 스테이지 관리 계 정 해독 html 버 전
vue 상단 메뉴 표시 줄 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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