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 5.5 のインストールと設定のグラフィックチュートリアル

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

MySQL の count()、group by、order by の詳細な説明

最近、IM を実行するときに、これらの 3 つのキーワードを同時に使用したときに問題が発生しました。...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

ネイティブ JS 音楽プレーヤー

この記事の例では、音楽プレーヤーを実装するためのJSの具体的なコードを参考までに共有しています。具体...

CSS3 クリックボタン円形進行ティック効果実装コード

目次8. CSS3 クリックボタンの円形進捗チェック効果8.1 画像プレビュー8.2 index.h...

ハイパーリンクに関するいくつかの質問

<br />ポテトチップスパーティーのこのエピソードに参加して、何人かの友達に会えてとて...

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

MySQL Group by最適化の詳細な説明

目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

MySQL のデフォルトのストレージ エンジンを変更する方法

mysql ストレージ エンジン: MySQL サーバーはモジュール スタイルを採用しており、特にス...

Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します

Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...

HTML スクロールバーのテキストエリア属性の設定

1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...

Sublime TextがUbuntuで中国語を入力できない問題の最も簡単な解決策

崇高なSublime Text はコード エディター (Sublime Text2 は有料ソフトウェ...

Tomcatを使用して共有ライブラリを設定し、同じjarを共有する

デプロイされるプロジェクトが増えるにつれて、Tomcat にデプロイされるリリース パッケージも増え...