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 実装手順を構築します
<br />質問:特定のファイルにジャンプするには、HTML でどのように記述すればよい...
1.公式サイトからダウンロードして解凍する参考: ダウンロード後、zip 圧縮ファイル (mysql...
静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...
良いアイデアを見つけたので記録しました。私は以前、スクロール効果を実現するためにjQueryを使用し...
コンテナ内でコマンドを実行したいが、コンテナに入りたくない場合があります。ではどうすればいいでしょう...
カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...
目次1. HTML5のテンプレートタグ2. テンプレートタグ操作のプロパティとメソッド3. Vueの...
この記事では、VMware 12でのUbuntu 16.04のインストールチュートリアルを参考までに...
目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...
CocosCreatorがスキルCD効果を実現多くのゲームにはスキルがあります。プレイヤーがスキルボ...
<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...
マーキー要素を使用すると、単純なフォント(画像など)のスライドやその他の効果を実現できます。コードを...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...
名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...