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; } .numbox { 幅: 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker はクラスター MongoDB 実装手順を構築します
目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...
テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...
nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...
使用 <div id="アプリ"> <router-link ...
目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...
MySQL クエリ キャッシュを設定する目的は次のとおりです。クエリ結果をキャッシュしておくと、次回...
この記事では、Centos7.6 システムと Oracle11g を例に挙げます。 1. まずデータ...
目次1. はじめに2. MVCC (マルチバージョン同時実行制御メカニズム) 2.1 繰り返し読み取...
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...
声明:この記事では、Web ページ制作技術を使用して問題を包括的に解決するという考え方を反映して、W...
目次1. v-text (v-instruction name = "variable&q...
この記事では、例を使用して、MySQL ストアド プロシージャでの if ステートメントの使用方法を...
かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...
目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...