Detaillierte Erläuterung des Vue-Entwicklungssortierungskomponentencodes

<Vorlage>
	<ul Klasse="Behälter">
		<li v-for="(Element, Index) in Datenliste" :Schlüssel="Index">
			{{item.text}}<span></span>
		</li>
	</ul>
</Vorlage>
<Skript>
	Standard exportieren{
		Requisiten:{},
		Daten(){
			zurückkehren {
				Datenliste:[
					{
						Ich würde: 1,
						Text: „Shandong“
					},
					{
						Ich würde: 2,
						Text: „Peking“
					},
					{
						Ich würde: 3,
						Text: „Shaanxi“
					},
					{
						Ich würde: 4,
						Text: „Chongqing“
					}
				]
			}
		},
		Komponenten: {},
		Methoden:{},
		montiert(){},
		erstellt(){},
		betrachten:{}
	}
</Skript>
<style scoped lang="scss">
	.Container{
		Anzeige: Flex;
		li{
			Position: relativ;
			Breite: 40px;
			Höhe: 20px;
			Schriftgröße: 14px;
			Schriftstärke: 300;
			Textausrichtung: zentriert;
			Zeilenhöhe: 20px;
			Spanne{
				Anzeige: Inline-Block;
				Position: absolut;
				Breite: 1px;
				Höhe: 50%;
				rechts: 0;
				oben: 50 %;
				transformieren: verschiebeY(-50%);
				Hintergrundfarbe: #EEEEEE;
			}
			&:last-child{ //Beachten Sie hier die Methode zum Entfernen der letzten grauen Linie span{
					Breite: 0;
				}
			}
		}
	}
</Stil>