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;
				}
			}
		}
	}
</スタイル>