Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueのコントロール商品数量コンポーネントのカプセル化と使用は参考までに。具体的な内容は以下のとおりです。

効果を達成するには

製品コンポーネントパッケージの数を制御するNumbox

<テンプレート>
    <div class="xtx-numbox">
    <div class="label">
      <スロット />
    </div>
    <div class="numbox">
      <a href="javascript:;" @click='toggle(-1)'>-</a>
      <input type="text" 読み取り専用 :value="num">
      <a href="javascript:;" @click='toggle(1)'>+</a>
    </div>
  </div>
</テンプレート>
<スクリプト>
'@vueuse/core' から {useVModel} をインポートします。

エクスポートデフォルト{
  名前: 'XtxNumbox',
  小道具: {
    モデル値: {
      タイプ: 数値、
      デフォルト: 1
    },
    在庫:
      タイプ: 数値、
      必須: true
    }
  },
  セットアップ(props、{emit}){
    // サードパーティのメソッドによって制御されるデータの双方向バインディング const num = useVModel(props, 'modelValue', emitting)
    // 製品データの変更操作を制御する const Toggle = (n) => {
      (n < 0) の場合 {
        // 1つ減算する if (num.value > 1) {
          数値 -= 1
        }
      } それ以外 {
        // 1つの操作を追加 if (num.value < 10) {
          数値 += 1
        }
      }
    }
    { num, トグル } を返す
  }
}
</スクリプト>
<style スコープ lang="less">
.xtx-numbox {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  .ラベル {
    幅: 60ピクセル;
    色: #999;
    左パディング: 10px;
  }
  .nu​​mbox {
    幅: 120ピクセル;
    高さ: 30px;
    境界線: 1px 実線 #e4e4e4;
    ディスプレイ: フレックス;
    > {
      幅: 29px;
      行の高さ: 28px;
      テキスト配置: 中央;
      背景: #f8f8f8;
      フォントサイズ: 16px;
      色: #666;
      &:最初の型 {
        右境界線: 1px 実線 #e4e4e4;
      }
      &:最後の型 {
        左境界線: 1px 実線 #e4e4e4;
      }
    }
    > 入力 {
      幅: 60ピクセル;
      パディング: 0 5px;
      テキスト配置: 中央;
      色: #666;
    }
  }
}
</スタイル>

親コンポーネントで使用する

<Numbox v-model='num' >数量</XtxNumbox>
設定(){
 //商品数//デフォルト値は1
  定数num = ref(1)
  戻る {
    番号 
  }
}

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

以下もご興味があるかもしれません:
  • Vueは商品分類メニューの数量プロンプト機能を実装します

<<:  MySQL MyISAM と InnoDB の違い

>>:  Docker はクラスター MongoDB 実装手順を構築します

推薦する

Vue要素ツリーコントロールに点線を追加する詳細な説明

目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...

2級コンピュータ試験のMySQL知識ポイント mysql alterコマンド

テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...

...

MySQL query_cache_type パラメータと使用方法の詳細

MySQL クエリ キャッシュを設定する目的は次のとおりです。クエリ結果をキャッシュしておくと、次回...

Linux で毎日データベースの自動バックアップを設定する方法

この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...

MySQL マルチバージョン同時実行制御メカニズム (MVCC) ソースコードの詳細な説明

目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...

ECMAScript6 におけるマップマッピングの基本概念と一般的な方法

目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...

クールなバーコードエフェクトの作り方を教えます

声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...

Vueの学習手順

目次1. v-text (v-instruction name = "variable&q...

MySQL ストアド プロシージャで if ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの if ステートメントの使用方法を...

CSS3のwebkit-box-reflectを巧みに使用して、さまざまな動的効果を実現します。

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...