تشارك هذه المقالة رمز تنفيذ عربة التسوق Vuejs للرجوع إليه. المحتوى المحدد كما يلي
HTML:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> my Vue Shopping Cart </title> <link rel = "stylesheet" href = "css/bootstrap.min.css src = "js/vue.js"> </script> <script src = "js/data.js"> </script> <body> <viv> <template v-if = "data.length"> <h3> عربة التسوق الخاصة بي: </h3> <span> العملية </span> </viv> <div style = "padding: 5 ٪ ؛ الحدود: 1px سوداء سوداء" v-for = "item in data"> <span> {{item.name}} </span> <span style = "margin-left: 18 ٪"> {{item. :: class = "{OFF: item.count == 11}">+</em> {{item.count}} <em v-on: click = "redive ($ index)": class = "kear: item.count == 1}">-</em> </span> <span> السعر الإجمالي للعنصر: {{price | currency '$' 2}} </span> </mapplate> <template v-else> <viv> <h1> عربة التسوق الخاصة بك فارغة </h1> <p> ما إذا كان يجب إعادة تحديده </p> <p> <a href = "rob =" button "> </viv> </body> <script> new vue ({el: '. container' ، البيانات: {data: data} ، محسوبة: {price: function () {var price = 0 ؛ for (var i = 0 ؛ i <this.data.length ؛ i ++) {var self = this.data [i] ؛ إضافة ($ index) {var self = this.data [$ index] ؛ if (countCSS:
H3 {text-align: center ؛}. اليسار {margin-left: 14 ٪ ؛}. البند {text-align: center ؛ Padding: 3 ٪ ؛}. Add {Margin-Left: 15 ٪ ؛}. Off {Background-Color: Lightgrey ؛ الحدود: 1px Lightgrey ؛}JS:
/*** تم إنشاؤه بواسطة المسؤول في 2016/7/29. */var data = [{name: 'iPhone 6' ، السعر: 5466 ، المعرف: 1 ، العد: 1} ، {name: 'imac' ، السعر: 7466 ، المعرف: 2 ، العد: 1} ، {name: 'iPad' ، السعر: 5400 ، المعرف: 3 ، عدد: 1}]تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
للدروس التعليمية على مكونات vue.js ، يرجى النقر على الموضوع الخاص التعليمي التعليمي للموضوع Vue.js للتعلم.
لمزيد من البرامج التعليمية التعليمية ، يرجى قراءة الموضوع الخاص "Vue العملي التعليمي"
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.