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. HTML構造を作成する2. テーブルを作成する3. ヘビの頭と体を作る4. 食べ物を作る5...
目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...
操作効果コードの実装html <div id="ウォッチ"> <...
目次問題の説明原因分析解決問題の説明最近、奇妙な問い合わせを受けました。更新ステートメントはエラーな...
目次mysql 権限制御権限システムテーブル変更後にMySQLの権限を有効にする方法権限の付与と取り...
序文以前、画像とテキストの垂直方向のずれの問題について説明しました。ここで示した小さな例では、小さな...
目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...
zhangxinxu より https://www.zhangxinxu.com/wordpress...
目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...
この記事では、JavaScriptで簡単な画像切り替えを実現するための具体的なコードを参考までに紹介...
1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...
CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...
効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...
UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...