Detaillierte Erläuterung der Werte von Optionsfeldern, Kontrollkästchen und Dropdown-Listen in Vue.js-Formular-Tags-js-Tutorial-php.cn

Detaillierte Erläuterung der Werte von Optionsfeldern, Kontrollkästchen und Dropdown-Listen in Vue.js-Formular-Tags

小云云

Freigeben： 2017-12-12 11:31:37

Original

4173 Leute haben es durchsucht

Vue.js kann problemlos eine bidirektionale Datenbindung implementieren und bietet daher große Vorteile bei der Formularverarbeitung und der Mensch-Computer-Interaktion. Lassen Sie mich Ihnen die Wertprobleme von Optionsfeldern, Kontrollkästchen und Dropdown-Listen in Vue.js-Formular-Tags vorstellen.

Zusammenfassung: Im Formularbeschriftungswertproblem sind Optionsfelder, Kontrollkästchen und Dropdown-Listen allesamt etwas Besonderes. Hier finden Sie eine Zusammenfassung der besonderen Probleme hinsichtlich des Werts von Optionsfeldern, Kontrollkästchen und Dropdown-Listen in verschiedenen Situationen in vue.js.

1. Optionsfeld

Optionsfeld: Das Optionsfeld verwendet das V-Modell, um das Wertattribut zu binden, um es zu bestimmen ob es ausgewählt ist.

Wenn das Optionsfeld keinen Wert schreibt, weisen Sie den Wert in vue.js auf null zu.

Wenn in normalen Tags kein Name geschrieben ist, gruppiert HTML standardmäßig die Optionsfelder ohne Namen in einer Gruppe.

In Vue gilt, auch wenn kein Name geschrieben ist Einzelne Schaltfläche Das Schaltflächen-V-Modell ist an dieselbe Variable (z. B. Geschlecht) gebunden, und diese Schaltflächen werden ebenfalls in einer Gruppe gruppiert. Aber aus Gewohnheit schreiben wir immer noch Namen.

Der in den Daten definierte Wert der Variablen „Geschlecht“ wirkt sich auf die Standardoption des Optionsfelds aus, z. B.: In diesem Beispiel ist „Geschlecht: „weiblich““ standardmäßig ausgewählt.

js-Teilecode:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  gender:"女"
 }
 });
}

Nach dem Login kopieren

HTML-Teilecode:

<body>
 <p id="app">
 <!-- 
  单选按钮：单选按钮用 v-model 绑定填值属性用来表示checked,用于判断是否选中。
  当单选按钮没写value值时，在vue中将值赋为null
  在普通标签中，当没写name时,html 会默认将没写name 的单选按钮分为一组；
  在vue中，即使没写name,只要单选按钮v-model绑定了同一个变量（如：gender），这些按钮也会被分为一组。

Nach dem Login kopieren

Aber in der Regel schreiben wir immer noch Namen. Wählen Sie die Standardoption der Schaltfläche aus, wie zum Beispiel: In diesem Beispiel ist Geschlecht: „weiblich“, weiblich standardmäßig ausgewählt.

 -->
 <input type="radio" id="man" name="gender" value="男" v-model="gender">
 <label for="man">男</label>
 <input type="radio" id="woman" name="gender" value="女" v-model="gender">
 <label for="woman">女</label>
 </p>
</body>

Nach dem Login kopieren

2. Schaltfläche „Häkchen“

Schaltfläche „Prüfen“: Die Optionsschaltfläche verwendet das V-Modell, um das Wertattribut so zu binden, dass es „geprüft“ anzeigt, und wird verwendet, um zu bestimmen, ob es ausgewählt ist.

Wenn die Mehrfachauswahlschaltfläche keinen Wert schreibt, weisen Sie den Wert in vue.js auf null zu.

Wie vue.js den Wert der Check-Schaltfläche annimmt, hängt vom Typ der an das V-Modell gebundenen Variablen ab.

1. Grundtypen

Während der Initialisierung wird das V-Modell an einen beliebigen Grundtyp (Zahl, String, Boolean, Null, Undefiniert) und den Wert It gebunden wird standardmäßig in den booleschen Typ konvertiert, true bedeutet ausgewählt, false bedeutet nicht ausgewählt.

JS-Codesegment:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies01:"",
  hobbies02:"...",
  hobbies03:false
 }
 });
}

Nach dem Login kopieren

HTML-Codesegment:

<body>
 <p id="app">
 <!-- v-model 绑定的是基本类型 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies01">
 <label for="box01">敲代码</label>
 <input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies02">
 <label for="box02">写代码</label>
 <input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies03">
 <label for="box03">撸代码</label>
 <hr/>
 </p>
</body>

Nach dem Login kopieren

Screenshot des Effekts:

Während der Initialisierung, wenn der Wert hobbies01 eine leere Zeichenfolge ist und in den booleschen Typ „false“ konvertiert, daher ist er nicht ausgewählt; der Wert von hobbies02 ist die Zeichenfolge „....“, die bei der Konvertierung in den booleschen Typ „true“ ist, sodass der Standardwert von hobbies03 standardmäßig „false“ ist. Daher wird es während der Initialisierung nicht ausgewählt.

Seitdem ändern sich die Werte von hobbies01, hobbies02 und hobbies03 jedes Mal, wenn Sie auf die Schaltfläche „Mehrfachauswahl“ klicken.

2. Array

Während der Initialisierung, wenn die an das V-Modell gebundene Variable vom Array-Typ ist. Vue geht davon aus, dass diese Schaltfläche zum Abrufen des Werts verwendet wird, und schreibt den entsprechenden Wert in der Reihenfolge der Auswahl (Mausklick) in das Array.

js-Code-Snippet:

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  hobbies:[]
 }
 });
}

Nach dem Login kopieren

HTML-Code-Snippet:

<body>
 <p id="app">
 <!-- v-model 绑定时数组 -->
 <input type="checkbox" name="hobbies" id="box01" value="敲代码" v-model="hobbies">
 <label for="box01">敲代码</label>
 <input type="checkbox" name="hobbies" id="box02" value="写代码" v-model="hobbies">
 <label for="box02">写代码</label>
 <input type="checkbox" name="hobbies" id="box03" value="撸代码" v-model="hobbies">
 <label for="box03">撸代码</label>
 </p>
</body>

Nach dem Login kopieren

Screenshot des Effekts:

Bei der Initialisierung ist hobbys ein leeres Array. Beachten Sie die entsprechenden Änderungen in der Reihenfolge der Mausklicks und Hobbys-Werte.