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

推薦する

JSネイティブ2列シャトル選択ボックスの実装例

目次いつ使うか構造的ブランチコードいつ使うか選択動作を完了するには、2 つの列間で要素を直感的に移動...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)

使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...

JavaScript でシンプルなクリスマス ゲームを実装する

目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

プロキシはVue3データの双方向バインディングの原理を実現します

目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...

自己終了XHTMLタグを書くときに注意すべきこと

XHTML の img タグはいわゆる自己終了タグであり、XML では完全に合法です。 XHTMLの...

Mailtoを使えばHTMLでメールを送るのは簡単

最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...

HTML テーブル マークアップ チュートリアル (37): 背景画像属性 BACKGROUND

テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

CSS 属性セレクタを使用して HTML DNA を接合する方法

CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...

SSH ポート転送とは何ですか?何の役に立つの?

目次序文1. ローカルポート転送2. リモートポート転送3. 動的ポート転送(SOCKS5) 4. ...

MySQLインデックスマージの使い方

インデックスのマージは、MySQL が最下層で提供するインテリジェントなアルゴリズムです。インデック...

Linux での Nginx アンチホットリンクと最適化の実装コード

バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...

Javascriptでシンプルなナビゲーションバーを実装

この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的な...