Die Verwendung des V-Modells in Select und Option, El-Select und El-Option. (vue verwendet el-select und el-option, um das Suchfeld zu implementieren) (die ersten vier Daten im Array sind standardmäßig ausgewählt)

V-Modell: Erstellen Sie eine bidirektionale Datenbindung für Formularelemente <input><textarea><select>. Die richtige Methode zum Aktualisieren des Elements wird automatisch basierend auf dem Steuerelementtyp ausgewählt. Die Essenz ist syntaktischer Zucker, der für das Abhören von Benutzereingabeereignissen verantwortlich ist, um Daten zu aktualisieren.

Features: Verwenden Sie immer die Daten der Vue-Instanz als Datenquelle -> den in Daten deklarierten Wert

• Die Elemente „text“ und „textarea“ verwenden die Eigenschaft „value“ und Eingabeereignisse
• Kontrollkästchen und Radio verwenden aktivierte Eigenschaft und ändern Ereignis
• Das Auswahlfeld übernimmt den Wert als Requisite und die Änderung als Ereignis

Auswahlfeld:

(1) Einzelauswahl

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {
   
   { selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Der ausgewählte Wert ändert sich entsprechend dem Wert der ausgewählten Option.

        Wenn bei der Einzelauswahl der Anfangswert des V-Modell-Ausdrucks mit keiner Option übereinstimmt, wird das ausgewählte Element als „nicht ausgewählt“ gerendert. In iOS kann der Benutzer dadurch die erste Option nicht auswählen, da iOS in diesem Fall das Änderungsereignis nicht auslöst. Daher wird empfohlen, eine deaktivierte Option mit einem leeren Wert bereitzustellen. 

(2) Bei Mehrfachauswahl an ein Array binden:

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {
   
   { selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

v-for Dynamische Optionen zum Rendern mit 

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {
   
   { option.text }}
  </option>
</select>
<span>Selected: {
   
   { selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

v-bind kann den Wert an eine dynamische Eigenschaft der Vue-Instanz binden, und sein Wert kann kein String sein.

<el-select v-model="needStatus" placeholder="请选择表单状态" style="width: 180px" multiple collapse-tags clearable>
    <el-option v-for="(item, index) in statusText" :key="item" :label="item" :value="index"></el-option>
</el-select>

data(){
    return{
        needStatus: [0,1,2,3,4],
        statusText: ['需求收集', '设计阶段', '开发阶段', '测试阶段', '准备上线', '上线运营', '对账归账'],
    }
}