Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Formularsteuerungsvorgänge von Vue.js

Zusammenfassung der Formularsteuerungsvorgänge von Vue.js

亚连Original: 2018-05-28 15:05:531726Durchsuche

Dieser Artikel führt Sie in die relevanten Kenntnisse der Vue.js-Formularsteuerung ein. Dieser Artikel demonstriert die Verwendung von V-Modellen in Eingabe- und Textbereichselementen. Dieser Artikel stellt Sie sehr gut vor und hat Referenzwert Wenn Sie es benötigen, können Sie sich auf

Konzeptbeschreibung

V-Modell-Direktive beziehen: Erstellen Sie eine bidirektionale Datenbindung für Formularsteuerelemente. 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 den Eingabe- und Textbereichselementen um Bidirektionalität zu erreichen. Datenbindung:

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>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: &#39;#app&#39;,
 data: {
 message: &#39;Runoob&#39;,
 message2: &#39;菜鸟教程\r\nhttp://www.runoob.com&#39;
 }
})
</script>
</body>
</html>

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: &#39;#app&#39;,
 data: {
 checked : false,
 checkedNames: []
 }
})
</script>
</body>
</html>

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: &#39;#app&#39;,
 data: {
 picked : &#39;Runoob&#39;
 }
})
</script>
</body>
</html>

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: &#39;#app&#39;,
 data: {
 selected: &#39;&#39; 
 }
})
</script>
</body>
</html>

Der Effekt ist wie folgt:

Modifikator

.lazy

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

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

.number

Wenn Sie den Eingabewert des Benutzers automatisch in den Zahlentyp konvertieren möchten (wenn die Konvertierung Das Ergebnis des Originalwerts ist NaN, der Originalwert wird zurückgegeben. Sie können dem V-Modell eine Modifikatornummer hinzufügen, um Eingabewerte zu verarbeiten:

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

Dies ist oft nützlich, da Eingabewerte in HTML verwendet werden werden immer als String-Typen zurückgegeben, wenn type="number".
.trim

Wenn Sie die vom Benutzer eingegebenen führenden und nachgestellten Leerzeichen automatisch filtern möchten, können Sie den Trimmmodifikator zum V-Modell hinzufügen, um die Eingabe zu filtern:

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

The Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Eine Sammlung von Methoden zum Deaktivieren von Ajax-Caching in (ASP/PHP/JSP/html/js)

Ajax-Methoden zur Verwendung von Aktionen in verschiedenen Namespaces

Verwenden Sie Ajax, um eine Vorschau des Links anzuzeigen, und Sie können den Inhalt des Links sehen

Das obige ist der detaillierte Inhalt vonZusammenfassung der Formularsteuerungsvorgänge von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie den Diff-Algorithmus in VueNächster Artikel：So verwenden Sie den Diff-Algorithmus in Vue

In Verbindung stehende Artikel

Mehr sehen