บทความนี้แชร์รหัสการใช้งานตะกร้าสินค้า VueJS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
html:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ตะกร้าสินค้า Vue ของฉัน </title> <link rel = "stylesheet" href = "css/bootstrap.min.css" src = "js/vue.js"> </script> <script src = "js/data.js"> </script> <body> <div> <template v-if = "data.length" </div> <div style = "padding: 5%; border: 1px solid black" v-for = "รายการในข้อมูล"> <pan> {{item.name}} </span> <span style = "margin-left: 18%"> {item.price}} : class = "{ปิด: item.count == 11}">+</em> {{item.count}} <em v-on: click = "ลด ($ index)": class = "ปิด: item.count == 1}">-</em> <span> ราคารวมของรายการ: {{ราคา | สกุลเงิน '$' 2}} </span> </template> <เทมเพลต v-else> <div> <h1> รถเข็นของคุณว่างเปล่า </h1> <p> ไม่ว่าจะเลือก </p> <p> </div> </body> <script> vue ใหม่ ({el: 'คอนเทนเนอร์', ข้อมูล: {data: data}, คำนวณ: {ราคา: function () {var price = 0; สำหรับ (var i = 0; i <this.data.length; i ++) {var self.data [i]; เพิ่ม: $ index) {var self = this.data [$ index]; if (self.count <= 1) {return false} self.count--;}, ลบ: ฟังก์ชั่น (รายการ) {this.data.CSS:
h3 {text-allign: center;}. ซ้าย {margin-left: 14%;}. รายการ {text-allign: center; Padding: 3%;}. เพิ่ม {margin-left: 15%;}. ปิด {พื้นหลังสี: LightGrey; ชายแดน: 1px Solid Lightgrey;}JS:
/*** สร้างโดยผู้ดูแลระบบเมื่อปี 2016/7/29 */var data = [{ชื่อ: 'iphone 6', ราคา: 5466, id: 1, นับ: 1}, {ชื่อ: 'iMac', ราคา: 7466, ID: 2, นับ: 1}, {ชื่อ: 'iPad', ราคา: 5400, ID: 3, นับ: 1}]บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
สำหรับการสอนเกี่ยวกับส่วนประกอบ vue.js โปรดคลิกที่หัวข้อพิเศษ vue.js การสอนการเรียนรู้องค์ประกอบเพื่อเรียนรู้
สำหรับบทช่วยสอนการเรียนรู้ VUE เพิ่มเติมโปรดอ่านหัวข้อพิเศษ "Vue Practical Tutorial"
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น