Vueはシンプルなショッピングカートの例を実装します

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は次のとおりです。

HTML ホームページ

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <meta http-equiv="X-UA-compatible" content="IE=edge">
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
  <title>ドキュメント</title>
  <link rel="スタイルシート" href="/css/index.css" >
  
</head>
<本文>
  <div id="アプリ">
   <div v-if="本.length != 0">
    <テーブル>
      <頭>
        <tr>
          <番目></番目>
          <th>書籍名</th>
          <th>予定通り公開</th>
          <th>価格</th>
          <th>購入数量</th>
          <th>オペレーション</th>
        </tr>
      </thead>
      <t本文>
        <tr v-for="(item,index) 書籍内">
          <td>{{item.id}}</td>
          <td>{{アイテム名}}</td>
          <td>{{item.date}}</td>
          <td>{{item.price | 表示価格}}</td>
          <td>
            <button @click="decrement(index)" :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td><button @click="removeHandle(index)">削除</button></td>
        
        </tr>
      </tbody>
    </テーブル>
    <h2>合計金額: {{totalPrice | showPrice}}</h2>
   </div>
   <h2 v-else>ショッピングカートは空です</h2>
  </div>
 
  <script src="/js/vue.js"></script>
  <script src="/js/index.js"></script>
</本文>
</html>

CSSコード

* {
  マージン: 0;
  パディング: 0;
}
テーブル {
  マージン: 100px 0 0 100px;
  境界線: 1px 実線 #e9e9e9;
  境界線の折りたたみ: 折りたたみ;
  境界線の間隔: 0;
}
 
番目、
td {
  パディング: 8px 16px;
  境界線: 1px 実線 #e9e9e9;
  テキスト配置: 左;
}
 
番目 {
  背景色: #f7f7f7;
  色: 黒;
  フォントの太さ: 6000 ;
}
 
h2 {
  幅: 500ピクセル;
  左マージン: 100px;
}
 
ボタン {
  パディング: 5px;
}

js コード (Vue)

constアプリ = 新しいVue({
  el:"#アプリ",
  データ:{
    書籍:
      {
        id:1,
        名前:「アルゴリズム入門」
        日付:'2019-2'、
        価格:85.00、
        カウント:1
      },
      {
        id:2,
        名前:「コンピュータの基礎」
        日付:'2019-2'、
        価格:95.00、
        カウント:1
      },
      {
        id:3,
        名前:'C++ 上級言語'、
        日付:'2019-2'、
        価格:89.00、
        カウント:1
      },
      {
        id:4,
        名前:'《コンパイル原則》',
        日付:'2019-2'、
        価格:77.00、
        カウント:1
      },
    ]
   
  },
  方法:{
    減算(インデックス){
      this.books[index].count--
    },
    増分(インデックス){
      this.books[インデックス].count++
    },
    ハンドルを削除します(インデックス){
      this.books.splice(インデックス,1)
    }
  },
 
  計算:{
    合計価格(){
      最終価格を 0 にする
      for(let i = 0; i < this.books.length; i++){
        最終価格 += this.books[i].price * this.books[i].count
      }
      最終価格を返す
    }
  },
 
  フィルター:
    価格を表示(価格){
      '¥' + price.toFixed(2) を返す
    }
  }
})

運用結果

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuejsは、完全なショッピングカートのサンプルコードを書く方法を段階的に教えてくれます
  • Vuejs ベースのショッピングカート機能の実装
  • Vueはショッピングカート機能を実装します
  • Vueはショッピングカートの小さなケースを実装します
  • Vueはショッピングモールのショッピングカート機能を実現
  • vuex で実装されたシンプルなショッピングカート機能の例
  • Vue を使用してショッピングカートの放物線ボールアニメーション効果を実現する方法の詳細な説明
  • Vueでショッピングカートの詳細ページを実装する方法
  • Vuejsはショッピングカート機能を実装します

<<:  ハイパーリンクに関するいくつかの質問

>>:  HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

推薦する

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

Apache ストレステストツールのインストールと使用

1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...

WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...

ReactJs 基礎チュートリアル - 基本編

目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...

mysql5.7.18 のインストール時にエントリが見つからない問題の解決方法

mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...

VUE ユニアプリの条件付きコーディングとページレイアウトに関する簡単な説明

目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...

ReactのuseEffectクロージャの落とし穴についての簡単な説明

問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...

MySQL設定ファイルを変更できない問題の解決方法(Win10)

他の人のために解決した問題を記録します。問題の説明MySQLのバージョンは5.7、オペレーティングシ...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

共通要素のデフォルトのマージンとパディング値に関する議論

今日は、さまざまなブラウザでのデフォルト要素のマージン値が何であるかという問題について説明しました。...

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...

JavaScript ドキュメント オブジェクト モデル DOM

目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...

JavaScript が Xiaomi のカルーセル効果を模倣

この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

ECMAScript のイテレータの詳細な説明

目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...