Heim > Artikel > Web-Frontend > So verwenden Sie die Formularsteuerelemente von Vue.js

So verwenden Sie die Formularsteuerelemente von Vue.js

php中世界最好的语言Original: 2018-05-03 09:39:391250Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Vue.js-Formularsteuerelement verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Vue.js-Formularsteuerelements?

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 den Eingabe- und Textbereichselementen um Bidirektionalität zu 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: 'php中文网',
 message2: 'www.php.cn'
 }
})
</script>
</body>
</html>

Kontrollkästchen

Wenn das Kontrollkästchen einzeln ist, ist es das auch Logische Werte sind, wenn sie mehrere sind, an dasselbe Array gebunden:

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>单个复选框：</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>

Optionsfeld

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">
 <input type="radio" id="runoob" value="Runoob" v-model="picked">
 <label for="runoob">PHP</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 : 'PHP'
 }
})
</script>
</body>
</html>

Dropdown

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">
 <select v-model="selected" name="fruit">
 <option value="">选择一个网站</option>
 <option value="www.PHP.cn">php</option>
 </select>
 <p id="output">
 选择的网站是: {{selected}}
 </p>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 selected: '' 
 }
})
</script>
</body>
</html>

Modifikatoren

.lazy

Standardmäßig wird das V-Modell mit dem Eingabeereignis synchronisiert. Der Wert und die Daten von das Eingabefeld, aber Sie können einen Modifikator lazy hinzufügen, um es im Änderungsereignis zu synchronisieren:

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

.number

Wenn Sie den Eingabewert des Benutzers automatisch in den Typ „Zahl“ konvertieren möchten (wenn der Das Konvertierungsergebnis des Originalwerts ist NaN, der Originalwert wird zurückgegeben.) Sie können dem V-Modell eine Modifikatornummer hinzufügen, um den Eingabewert zu verarbeiten:

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

Dies ist oft nützlich, da type="number " Der in HTML eingegebene Wert wird immer als String-Typ zurückgegeben.
.trim

Wenn Sie automatisch die führenden und nachgestellten 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">

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:

Welche Funktionen werden von new() in JS implementiert?

Was sind die Verwirrungspunkte bei der Verwendung? JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Formularsteuerelemente 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 bedienen Sie js, wenn Sie json an den Controller übergebenNächster Artikel：So bedienen Sie js, wenn Sie json an den Controller übergeben

In Verbindung stehende Artikel

Mehr sehen