Vue開発の詳細な説明 ソートコンポーネントコード

Vue開発の詳細な説明 ソートコンポーネントコード
<テンプレート>
	<ul class="コンテナ">
		<li v-for="(item,index) in datalist" :key="index">
			{{item.text}} <span></span>
		</li>
	</ul>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		小道具:{},
		データ(){
			戻る {
				データリスト:[
					{
						id:1,
						テキスト:'山東'
					},
					{
						id:2,
						テキスト:「北京」
					},
					{
						id:3,
						テキスト:'陝西'
					},
					{
						id:4,
						テキスト:「重慶」
					}
				]
			}
		},
		コンポーネント:{},
		メソッド:{},
		マウントされた(){}、
		作成された(){}、
		時計:{}
	}
</スクリプト>
<スタイル スコープ lang="scss">
	。容器{
		ディスプレイ: フレックス;
		li{
			位置: 相対的;
			幅: 40px;
			高さ: 20px;
			フォントサイズ: 14px;
			フォントの太さ: 300;
			テキスト配置: 中央;
			行の高さ: 20px;
			スパン{
				表示: インラインブロック;
				位置: 絶対;
				幅: 1px;
				高さ: 50%;
				右: 0;
				上位: 50%;
				変換: translateY(-50%);
				背景色: #EEEEEE;
			}
			&:last-child{ //ここで、最後の灰色の線を削除する方法に注意してください span{
					幅: 0;
				}
			}
		}
	}
</スタイル>

以下もご興味があるかもしれません:
  • Vue でのルータービューコンポーネントの使用に関する詳細な説明
  • Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
  • VUE ユニアプリカスタムコンポーネントについての簡単な説明
  • VUE ユニアプリの基本コンポーネントの簡単な紹介
  • Vueのコンポーネントの詳細な説明

<<:  Dockerはイメージ名とTAG操作の名前を変更します

>>:  divとspanの違いと使い方

推薦する

時間に基づいて日付をクエリするためのMySQL最適化テクニック

たとえば、昨日新規登録されたユーザーを照会するには、次の 2 つの書き方があります。 説明する ch...

Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法

目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...

MySQL 5.5 のインストールと設定のグラフィックチュートリアル

MySQL 5.5 のインストールと構成のチュートリアル ノートを整理し、全員と共有します。 1.公...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル

導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...

Node.js での組み込みモジュールとカスタムモジュールの実装

1. コモンズCommonjsはNode.jsのカスタムモジュールですCommonjs 仕様は、Ja...

Linux システムでデプロイメント プロジェクトを設定する方法

1. ファイアウォールの設定を変更し、対応するポートを開きますLinux システムのファイアウォール...

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

Vueはテーマ切り替えのための複数のアイデアを実装します

目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...

HTML チュートリアル、HTML デフォルト スタイル

html 、アドレス、引用、本文、 dd 、 div 、 dl 、 dt 、フィールドセット、フォ...

Vueの最初のレンダリングのプロセス全体についての簡単な説明

目次1. Vueの初期化vue エントリ ファイルフルバージョンとランタイムバージョンの違い1.1、...

MySQL のバックアップとリカバリの設計アイデア

背景まず、背景を説明します。ある制約により、当社の現在のバックアップ戦略では、1 日おきにフル バッ...

JS でシングルトン モードを実装するための 6 つのソリューションの概要

序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...