Erfahren Sie mehr über das V-Modell und seine Modifikatoren in einem Artikel

Vorwort

Wird zum Binden von Daten und Elementwerten verwendet, um eine bidirektionale Bindung zu erreichen.

Wenn sich der Wert des Elements ändert, ändern sich auch die Daten, und umgekehrt, wenn sich die Daten ändern, ändert sich auch der Wert des Elements.

In den meisten Fällen müssen alle Benutzereingabewerte durch das V-Modell laufen, das einfach zu verwenden, sicher und leistungsstark ist.

<div Klasse="App">
	<Eingabetyp="Text" v-Modell="Name">
	{{Name}}
</div>

var app = new Vue({
	el:'.app',
	Daten:{
		Name:'Alice'
	}
});

Modifikatoren des V-Modells:

faul

Lazy bedeutet verzögertes Update, also eine sofortige Aktualisierung.

Tatsächlich löst es ein Änderungsereignis aus.

Vorteile: Das Ergebnis der Formularvalidierung wird erst angezeigt, wenn der Benutzer die Eingabe abgeschlossen hat, unabhängig davon, ob sie richtig oder falsch ist. Aber stören Sie den Benutzer nicht beim Tippen. Darüber hinaus wurde auch die Leistung leicht verbessert (aber es ist sehr klein und kann ignoriert werden)

<div Klasse="App">
    <Eingabetyp="Text" v-model.lazy="Name">
    {{Name}}
</div>

trimmen

trimmen; abschneiden bedeutet hier: alle Leerzeichen an beiden Enden entfernen

<div Klasse="App">
    <Eingabetyp="Text" v-Modell.trim="Name">
    {{Name}}
</div>

Nummer

Wird im Allgemeinen für Typen verwendet, die in Zahlen ausgedrückt werden können, wie z. B. Alter und Preis

<div Klasse="App">
    <input type="text" v-model.number="Alter">
    {{Alter}}
</div>

Wenn keine Nummer angegeben ist, handelt es sich bei der Benutzereingabe im Normalfall um eine Zahl, es kann sich jedoch auch um eine Zahlenfolge handeln. Wenn hier der Modifikator v-model.number eingesetzt wird, ist die erhaltene Nummer vom Typ Nummer und es ist keine weitere Konvertierung erforderlich.

Neben der Verwendung in Eingabefeldern vom Typ Text kann v-model auch an anderen Stellen verwendet werden.

Verwendung des V-Modells für verschiedene Eingabetypen und andere Elemente

1. Zusätzlich zum Eingabeelement kann es auch auf andere Arten von Eingabeelementen verwendet werden

1.1 Verwendung beim Eingabeelementtyp Radio (Einzelauswahlfeld)

<div Klasse="App">
	<Bezeichnung>
		Männlich <input type="radio" v-model="sex" value="male">
	</Bezeichnung>
	<Bezeichnung>
		Weiblich <input type="radio" v-model="sex" value="famale">
	</Bezeichnung>
	{{Sex}}
</div>

//main.js
var app = new Vue({
	el:'.app',
	Daten:{
		Sex:'',
	}
});

1.2 Verwendung von Kontrollkästchen (Checkbox) beim Eingabeelementtyp

<div Klasse="App">
	Magst du Männer oder Frauen:<br>
	<Bezeichnung>
		Männlich <input type="checkbox" v-model="sex" value="male">
	</Bezeichnung>
	<Bezeichnung>
		Weiblich <input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{Sex}}
</div>

var app = new Vue({
	el:'.app',
	Daten:{
		Geschlecht:['männlich'],
	}
});

2. Verwendung des V-Modells im Textbereich (mehrzeiliger Text)

Mehrzeiliger Text

Tatsächlich gibt es keinen Unterschied zwischen der Verwendung von mehrzeiligem und einzeiligem Text, außer dass der eine mehrzeilig und der andere einzeilig ist und die Verwendung dieselbe ist.

<div Klasse="App">
	<textarea v-model="Artikel"></textarea>
</div>

var app = new Vue({
	el:'.app',
	Daten:{
		Artikel: „Enthält viel Code.“ . . . . . . . . . . . . . . . . . . . `,
	}
});

3. Verwendung des V-Modells in der Auswahl (Dropdown-Liste)

3.1 Dropdown-Liste mit Einzelauswahl

<div Klasse="App">
	<div>woher kommst du? </div>
	<v-Modell auswählen='von'>
		<option value="1">GUANGZHOU</option>
		<option value="2">PEKING</option>
	</Auswählen>
</div>

var app = new Vue({
	el:'.app',
	Daten:{
		von:'1',
	}
});

3.2 Dropdown-Liste mit Mehrfachauswahl

Tatsächlich wird dem Element ein Mehrfachattribut hinzugefügt, das eine Mehrfachauswahl anzeigt

<div Klasse="App">
	<div>Wohin möchtest du gehen? </div>
	<v-Modell auswählen='aus' mehrere>
		<option value="1">GUANGZHOU</option>
		<option value="2">PEKING</option>
		<option value="4">SHANGHAI</option>
		<option value="5">CHENGDU</option>
	</Auswählen>
</div>

var app = new Vue({
	el:'.app',
	Daten:{
		von:['1','2'],
	}
});

Zusammenfassen

Dies ist das Ende dieses Artikels über das V-Modell und seine Modifikatoren. Weitere Informationen zum V-Modell und seinen Modifikatoren finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!