Artikel ini membagikan kode implementasi keranjang belanja Vuejs untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
html:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> keranjang belanja vue saya </iteme> <link rel = "stylesheet" href = "css/bootstrap.min.css"> <link rel = "stylesheet" href = "caps. src="js/vue.js"></script> <script src="js/data.js"></script><body> <div> <template v-if="data.length"> <h3>My shopping cart:</h3> <div> <div> <span>Product name</span> <span>Unit price of goods</span> <span>Quantity of goods</span> <span>Operation</span> </Div> <div style = "Padding: 5%; Border: 1px solid black" v-for = "item in data"> <span> {{item.name}} </span> <span style = "margin-left: 18%"> {{item.price}} </span> <span> <em-on: click = " : class = "{off: item.count == 11}">+</em> {{item.count}} <em v-on: click = "reduksi ($ indeks)": class = "{off: item.count == 1}"> </em> </span> <span v-on: click = "Remahkan (ramping)"> </span> </span> <span v-on: click = "remeed (ramping)"> </span> </span> <span v-on: click = ramping (ramping) "> </span> </span> <span v-on: click = ramping (ramping)"> HOB2> <span> Harga Total Item: {{Price | Currency '$' 2}} </span> </emplate> <template v-else> <hv> <h1> keranjang Anda kosong </h1> <p> Apakah akan seleksi ulang </p> <p> <a href = "#" role = "rane"> RE-select </p> <p> <a href = "#" role = "Tombol"> RE-select </p> <p> <a href = "#" role = "Tombol"> RE-CELECT </p> <p> <a href = "#" role = "Button"> RE-select </p> <p> <a href = "#" role = "Button"> RE-select> </div> </body> <script> vue baru ({el: '. container', data: {data: data}, dihitung: {price: function () {var price = 0; for (var i = 0; i <this.data.length; i ++) {var self = this.data [i]; price. (indeks) {var self = this.data [$ index]; if (self.count <= 1) {return false} self.count--;CSS:
h3 {text-align: center;}. kiri {margin-left: 14%;}. Item {text-align: center; padding: 3%;}. Tambahkan {margin-left: 15%;}. OFF {latar belakang-warna: lightgrey; Perbatasan: Lightgrey padat 1px;}JS:
/*** Dibuat oleh Administrator pada 2016/7/29. */var data = [{name: 'iPhone 6', Harga: 5466, ID: 1, Count: 1}, {name: 'iMac', Harga: 7466, ID: 2, Count: 1}, {Name: 'iPad', Harga: 5400, ID: 3, hitungan: 1}]Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Untuk tutorial tentang komponen vue.js, silakan klik topik khusus tutorial pembelajaran komponen vue.js untuk dipelajari.
Untuk tutorial pembelajaran vue lebih lanjut, silakan baca topik khusus "Tutorial Praktis Vue"
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.