Beispielfreigabe, wie vue.js Optionsfelder, Kontrollkästchen und Dropdown-Boxen implementiert

In diesem Artikel werden hauptsächlich Beispiele für die Implementierung von Optionsfeldern, Kontrollkästchen und Dropdown-Feldern in vue.js vorgestellt. Es hat einen gewissen Referenzwert.

Vue.js kann es sehr Die bidirektionale Datenbindung lässt sich bequem realisieren und bietet daher große Vorteile bei der Formularverarbeitung und der Mensch-Computer-Interaktion. Im Folgenden werden Optionsfelder, Kontrollkästchen und Dropdown-Boxen als Beispiele verwendet, um deren spezifische Implementierung in HTML und Vue.js vorzustellen.

1. Optionsfeld

Die Methode zum Implementieren des Optionsfelds in herkömmlichem HTML ist wie folgt:

<p id="app"> 
 <input type="radio" name="gender" value="man" id="man"/><label for="man">男</label> 
 <input type="radio" name="gender" value="woman" id="women"/><label for="women">女</label> 
</p>

Hinweis: Die Namensattributwerte müssen hier gleich sein, um sicherzustellen, dass nur einer gleichzeitig ausgewählt werden kann. Es wird auch verwendet, um die an den Server gesendeten Daten zu identifizieren. Wenn die Schaltfläche ausgewählt wird, wird der Wert an den Server gesendet.

Es ist bequemer, Vue zu verwenden. js, um das Optionsfeld beispielsweise wie folgt zu implementieren. Wir benötigen das Namensattribut nur noch, um die gleiche Variable an jede Option zu binden, um sicherzustellen, dass gleichzeitig nur eine Variable ausgewählt wird Geben Sie bei Auswahl den Wert an.

<p id="app"> 
 <label>男<input type="radio" v-model="gender" value="man"/></label> 
 <label>女<input type="radio" v-model="gender" value="woman"/></label> 
 <p>已选：{{gender}}</p><!--如果用原生js实现此功能比较麻烦--> 
</p> 
<script> 
 var app=new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   gender:&#39;&#39; 
  } 
 }); 
</script>

2. Kontrollkästchen

Kontrollkästchen in herkömmlichem HTML implementieren Der Code lautet wie folgt:

<p id="app"> 
 <input type="checkbox" name="whom" value="jack" id="Jack"/><label for="Jack">jack</label> 
 <input type="checkbox" name="whom" value="bob" id="Bob"/><label for="Bob">bob</label> 
 <input type="checkbox" name="whom" value="alice" id="Alice"/><label for="Alice">alice</label> 
</p>

Wie Sie dem obigen Code entnehmen können: Die Konstruktionsmethode von Optionsfeldern und Kontrollkästchen in HTML ist ähnlich, außer dass der Typwert zum Kontrollkästchen und wird Gleichzeitig werden Name und Wert auch zur Darstellung eines Kontrollkästchens und seines Auswahlstatus verwendet.

Das Erstellen von Kontrollkästchen in vue.js ähnelt dem von Optionsfeldern, mit der Ausnahme, dass jedes Optionsfeld mithilfe des V-Modells an eine Variable gebunden ist. Diese Variablen werden im Allgemeinen in einem Objekt platziert, oder das V-Modell bindet ein Identisches Attributname, und das Attribut ist ein Array; Beispiele für diese beiden Situationen sind wie folgt:

Verwenden Sie das V-Modell, um eine Variable an jedes Optionsfeld zu binden:

<p id="app"> 
 <label>jack<input type="checkbox" v-model="person.jack"/></label> 
 <label>bob<input type="checkbox" v-model="person.bob"/></label> 
 <label>alice <input type="checkbox" v-model="person.alice"/></label> 
 <p>已选：{{person}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   person: {jack: false, bob: false, alice: false} 
  } 
 }) 
</script>

Wie Sie dem obigen Code entnehmen können: Das Wertattribut wird hier nicht mehr benötigt. Der an jedes Attribut gebundene Wert ist vom Typ boolean, wenn er nicht ausgewählt ist true. false;

Binden Sie ein Attribut desselben Array-Typs an das V-Modell:

<p id="app"> 
 <label>jack<input type="checkbox" v-model="whom" value="jack"/></label> 
 <label>bob<input type="checkbox" v-model="whom" value="bob"/></label> 
 <label>alice <input type="checkbox" v-model="whom" value="alice"/></label> 
 <p>已选：{{whom.join(&#39;|&#39;)}}</p> 
</p> 
<script> 
 var app = new Vue({ 
  el: &#39;#app&#39;, 
  data: { 
   whom: [] 
 } 
 }) 
</script>

Wie Sie dem Code entnehmen können: for Alle Optionen sind an denselben Array-Namen gebunden. Wenn diese Option ausgewählt ist, wird der entsprechende Wert zum Array hinzugefügt.

3. Dropdown-Box

Der herkömmliche Code zum Erstellen einer Dropdown-Box mit HTML lautet wie folgt:

<select name="selected"> 
 <option value="a">A</option> 
 <option value="b">B</option> 
 <option value="c">C</option> 
</select>

Der Name wird zur Datenidentifizierung verwendet, wenn er an den Server gesendet wird, und der Wert ist der Wert, der bei Auswahl an den Server gesendet wird. Wenn der Wert in der Option weggelassen wird, ist der an den Server gesendete Wert der Wert zwischen den Options-Tags.

Die Methode zum Implementieren der Dropdown-Box mit vue2.0 ist wie folgt:

<p id="app"> 
 <select v-model="selected"> 
  <option v-for="item in items" v-bind:value="item.value">{{item.text}}</option> 
 </select> 
 <span>已选:{{selected}}</span> 
</p> 
<script src="vue.js"></script> 
<script> 
 new Vue({ 
  el:&#39;#app&#39;, 
  data:{ 
   items:[{text:&#39;A&#39;,value:&#39;a&#39;},{text:&#39;B&#39;,value:&#39;b&#39;},{text:&#39;C&#39;,value:&#39;c&#39;}], 
   selected:&#39;&#39; 
  } 
 }); 
</script>

Wie Sie aus dem sehen können Code, verwenden Sie die v-for-Anweisung, vermeiden Sie das wiederholte Schreiben von Options-Tags und verwenden Sie die v-bind-Anweisung, um das Wertattribut zu binden. Wenn ein Element ausgewählt wird, wird der Wert der Option der ausgewählten Variablen zugewiesen.

Ob es in HTML geschrieben oder in Vue implementiert ist: Wenn Sie ein Dropdown-Feld mit Mehrfachauswahl implementieren müssen, müssen Sie nur das Mehrfachattribut in das Auswahl-Tag schreiben (gleichzeitig in Vue, die ausgewählte Variable wird auf ein leeres Array initialisiert).

Das obige ist der detaillierte Inhalt vonBeispielfreigabe, wie vue.js Optionsfelder, Kontrollkästchen und Dropdown-Boxen implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!