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 実装手順を構築します

推薦する

更新SQL文に基づくMySQLロックの理解

序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

Javascript 非同期プログラミング: Promise を本当に理解していますか?

目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...

Vue でスクロールバーのスタイルを変更する方法

目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...

Linux での MySQL 8.0.25 のインストールと設定のチュートリアル

LinuxにMySQL 8.0.25をインストールするための最新のチュートリアルを参考にしてください...

CSSで特殊なグラフィックを描く方法

1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...

Linux環境でよく使われるMySQLコマンドの紹介

mysql コマンドを入力します: mysql -u+(ユーザー名) -p+(パスワード) mysq...

mysqlのデータディレクトリ内のファイルを直接コピーしてデータを復元する実装

mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...

MySQL ストアド プロシージャ (in、out、inout) の詳細な説明

1. はじめにバージョン 5.0 以降でサポートされています。特定の機能を実行するための SQL ス...

docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...

シンプルなメッセージボードケースを実現するJavaScript

参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

mysql エラー 1033 を解決する方法: ファイル内の情報が正しくありません: 'xxx.frm'

問題の説明1. 収集ステーションのデータベース2. データが無い状態での移動は問題ありませんが、デー...