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 実装手順を構築します
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...
目次まず、スクロール バーのスタイルを変更するには、疑似要素-webkit-scrollbarを使用...
LinuxにMySQL 8.0.25をインストールするための最新のチュートリアルを参考にしてください...
1. 三角形境界線の設定 コード: 幅: 300ピクセル; 高さ: 300px; 背景: 赤; 境界...
mysql コマンドを入力します: mysql -u+(ユーザー名) -p+(パスワード) mysq...
mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...
MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...
1. はじめにバージョン 5.0 以降でサポートされています。特定の機能を実行するための SQL ス...
springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...
参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...
MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...
問題の説明1. 収集ステーションのデータベース2. データが無い状態での移動は問題ありませんが、デー...
<!DOCTYPE html> <html lang="ja"...