この記事では、参照のためにVUEJSショッピングカートの実装コードを共有しています。特定のコンテンツは次のとおりです
HTML：
<！Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>私のvueショッピングカート</title> <link rel = "styleSheet" href = "css/bootstrap.min.css"> <link rel = "styleSheet 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 </span </span </span> </div> <div style = "padding：5％; border：1px solid black" v-for = "item in data"> <span> {{item.name}} </span> <span style = "style = 18％"> {{item.price}}} </span> <em v-on： "dlick（$ index）" " ：class = "{off：item.count == 11}">+</em> {{item.count}} <em v-on：click = "redix（$ index）"：class = "{item.count == 1}"> - </em> </span> <span v-on：click = "" <span>アイテムの合計価格：{{rice | currency '$' 2}} </span> </template> <template v-else> <div> <h1>あなたのカートは空です</h1> <p> </p> <p> <p> <a href = "＃"＃ " </div> </body> <script> new vue（{el： '。コンテナ'、data：{data：data}、calculated：{price：function（）{var i = 0; i <this.data.length; i ++）{var self）{var self = this.data [i]; self.count * celf; （$ index）{self.data [$ count> 10）{count ++; if（self.count <= 1）{return false} self.count-;CSS：
h3 {text-align：center;}。パディング：3％;}。追加{マージン左：15％;}。境界線：1px lightgrey;}JS：
/*** 2016/7/29に管理者によって作成されました。 */var data = [{name： 'iphone 6'、fires：5466、id：1、count：1}、{name： 'imac'、frice：7466、id：2、count：1}、{name： 'ipad'、price：5400、id：3、count：1}]この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
Vue.jsコンポーネントのチュートリアルについては、特別なトピックVue.jsコンポーネント学習チュートリアルをクリックして学習してください。
Vue Learningチュートリアルの詳細については、特別なトピック「Vue Practical Tutorial」をお読みください。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。