이 기사는 참조에 대한 vuejs 쇼핑 카트 구현 코드를 공유합니다. 특정 내용은 다음과 같습니다
HTML :
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> my vue 쇼핑 카트 </title> <link rel = "stylesheet"href = "css/bootstrap.min.css"> href = "href ="css/style.css/style. src = "js/vue.js"> </script> <script src = "js/data.js"> </script> <body> <div> <template v-if = "data.length"> <h3> 내 쇼핑 카트 : </h3> <div> <div> <span> 제품 이름 </span> 상품의 단위 가격 </span> </span> <Span> 작동 </span> </div> <div style = "패딩 : 5%; 테두리 : 1px solid black"v-for = "data in data"> <span> {{item.name}}} </span> <span style = "margin-left : 18%"> {{item.price}} </span <em v- : 클릭 = "" "" "" : "{off : item.count == 11}">+</em> {{item.count}} <em v-on : "regial ="reture ($ index) ": class ="{off : item.count == 1} ">-</em> </em> </div> </div> <h2> 목록 : <span> 항목의 총 가격 : {{price | Currency '$'2}} </span> </템플릿> <Template v-else> <div> <h1> 카트가 비어 있습니다 </h1> <p> 재 선출 여부 </p> <p> <a href = "#"roby = "button"> re-select> </p> </p> </p> </p> </p> </div> </body> <cript> new vue ({el : '. 컨테이너', data : {data : data}, 계산 : {price : forting : {var price = 0; for (var i = 0; i <this.data.length; i ++) {var self = this.data [i]; price+= self.count * self.prise; ($ index <= 1) {return false} self.count};CSS :
H3 {Text-Align : Center;}. Left {margin-left : 14%;}. 항목 {text-align : center; 패딩 : 3%;}. add {margin-left : 15%;}. off {background-color : lightgrey; 국경 : 1px Solid Lightgrey;}JS :
/*** 2016/7/29의 관리자가 작성했습니다. */var data = [{이름 : 'iPhone 6', 가격 : 5466, id : 1, count : 1}, {이름 : 'iMac', 가격 : 7466, id : 2, count : 1}, {이름 : 'iPad', id : 3, count : 1}]이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
더 많은 Vue Learning Tutorials를 보려면 특별 주제 "Vue Practical Tutorial"을 읽으십시오.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.