Ausführliche Erläuterung der Verwendung von Formularsteuerelementen in Vue.js-js-Tutorial-php.cn

Ausführliche Erläuterung der Verwendung von Formularsteuerelementen in Vue.js

php中世界最好的语言

Freigeben： 2018-04-28 09:21:41

Original

1442 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Verwendung von Vue.js-Formularsteuerelementen ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue.js-Formularsteuerelementen?

Konzeptbeschreibung

V-Modell-Direktive: Erstellt eine bidirektionale Datenbindung für ein Formularsteuerelement. V-Model wählt automatisch die richtige Methode zum Aktualisieren des Elements basierend auf dem Steuerelementtyp.

Eingabefeld

Das Beispiel demonstriert die Verwendung des V-Modells in Eingabe- und Textbereichselementen Bidirektionalität erreichen Datenbindung:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>input 元素：</p>
 <input v-model="message" placeholder="编辑我……">
 <p>消息是: {{ message }}</p>
 <p>textarea 元素：</p>
 <p style="white-space: pre">{{ message2 }}</p>
 <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 message: 'Runoob',
 message2: '菜鸟教程\r\nhttp://www.runoob.com'
 }
})
</script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie im Bild gezeigt:

Komplexes Kontrollkästchen

Wenn es sich um ein einzelnes Kontrollkästchen handelt, handelt es sich um einen logischen Wert. Wenn mehrere Kontrollkästchen vorhanden sind, ist es an dasselbe Array gebunden:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>单个复选框：</p>
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
 <p>多个复选框：</p>
 <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
 <label for="runoob">Runoob</label>
 <input type="checkbox" id="google" value="Google" v-model="checkedNames">
 <label for="google">Google</label>
 <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
 <label for="taobao">taobao</label>
 <br>
 <span>选择的值为: {{ checkedNames }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 checked : false,
 checkedNames: []
 }
})
</script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Optionsfeld

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <input type="radio" id="runoob" value="Runoob" v-model="picked">
 <label for="runoob">Runoob</label>
 <br>
 <input type="radio" id="google" value="Google" v-model="picked">
 <label for="google">Google</label>
 <br>
 <span>选中值为: {{ picked }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 picked : 'Runoob'
 }
})
</script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Dropdown-Liste

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <select v-model="selected" name="fruit">
 <option value="">选择一个网站</option>
 <option value="www.runoob.com">Runoob</option>
 <option value="www.google.com">Google</option>
 </select>
 <p id="output">
 选择的网站是: {{selected}}
 </p>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 selected: '' 
 }
})
</script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Modifikatoren

.lazy

Standardmäßig synchronisiert das V-Modell die Wert und Daten des Eingabefelds im Eingabeereignis, aber Sie können einen Modifikator lazy hinzufügen und so im Änderungsereignis zur Synchronisierung wechseln:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

Nach dem Login kopieren

.number

Wenn Sie automatisch konvertieren möchten Geben Sie den Eingabewert des Benutzers in den Zahlentyp ein (wenn das Konvertierungsergebnis des Originalwerts NaN ist, geben Sie den Originalwert zurück). Sie können dem V-Modell eine Modifikatornummer hinzufügen, um den Eingabewert zu verarbeiten:

<input v-model.number="age" type="number">

Nach dem Login kopieren

This ist normalerweise nützlich, da der in HTML eingegebene Wert immer den String-Typ zurückgibt, wenn type="number" .
.trim

Wenn Sie automatisch das erste und letzte Leerzeichen von Benutzereingaben filtern möchten, können Sie den Trimmmodifikator zum V-Modell hinzufügen, um die Eingabe zu filtern:

<input v-model.trim="msg">

Nach dem Login kopieren

Ich glaube, ich habe es gesehen. Im Fall dieses Artikels beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Controller empfängt js, um JSON-Parameter zu übergeben

Detaillierte Erläuterung der Methode von Vue zum Verpacken von Domänennamen entsprechend zu Parametermethoden

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Formularsteuerelementen in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!