Analyse der V-Modell-Direktive in Vue (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Analyse der V-Modell-Anweisung in Vue (mit Code). Sie hat einen guten Referenzwert und ich hoffe, dass sie Freunden in Not helfen kann.

1. Befehlserklärung

v-model erstellt eine bidirektionale Bindung für Formularsteuerelemente oder Komponenten. Es ist im Wesentlichen für die Überwachung von Benutzereingabeereignissen (onchange, onkeyup, onkeydown usw.) verantwortlich (Eines speziell, bitte überprüfen Sie auch die offizielle zugrunde liegende Implementierungsdokumentation), um die Daten zu aktualisieren und eine spezielle Verarbeitung für einige extreme Szenarien durchzuführen.

2. Methoden und Methoden zur Formulareingabebindung

2.1 Beispiel einer bidirektionalen Datenbindung für das Eingabefeld:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="text" v-model="inputs"/><br/>
      <label>你在input框中输入了:</label><span>{{inputs}}</span>
    </div>
  </div>
</template>

<script>
    export default {
        name:"v-model",
      data(){
          return {
            title: &#39;v-model学习&#39;,
            inputs: &#39;&#39;
          }
      }
    }
</script>

<style scoped>
  .p1{
  text-align: left;
  }
  .spancss1{
      float: left;
      }
</style>

2.2 Textbereich Beispiel für eine doppelte Datenbindung mit Zeilentext:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><textarea v-model="text"></textarea><br/>
      <label>你在textarea框中输入了:</label><span>{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        text: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.3 Kontrollkästchen-Datenbindung

Einzelne Kontrollkästchen-Datenbindung Beispiel:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label><input type="checkbox" id="checkbox" v-model="checked">选我<br/>
      <label v-if="checked">选中了:</label>
      <label v-if="!checked">没选中:</label>
      <span>{{ checked }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checked: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Mehrere Kontrollkästchen zum Implementieren der Datenbindung Beispiel:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>请输入:</label>
      <input type="checkbox" id="vue1" value="vue1" v-model="checkedValues">vue1
      <input type="checkbox" id="vue2" value="vue2" v-model="checkedValues">vue2
      <input type="checkbox" id="vue3" value="vue3" v-model="checkedValues">vue3
      <br/>
      <label>选中了：</label><span>{{ checkedValues }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checkedValues: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.4 Optionsfelder implementieren die Datenbindung, und der ausgewählte Optionsfeldwert wird abgerufen und angezeigt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <input type="radio" id="radio1" value="1" v-model="checked">男<br/>
      <input type="radio" id="radio2" value="2" v-model="checked">女<br/>
      <label> 选中了：{{ checked }}</label>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        checked: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

2.5 Einführung in das Auswahlfeld

Methode 1: Das Auswahlfeld implementiert zunächst eine Einzelauswahl. Wenn die Optionen im Optionsfeld das deaktivierte Attribut festlegen, können die Optionen nicht ausgewählt werden Optionen im Optionsfeld haben keinen Wert, der Text der Optionen wird gebunden, wenn die Optionen ausgewählt werden. Wenn die Optionen im Optionsfeld einen Wert haben, wird der Wert der Optionen gebunden, wenn die Optionen ausgewählt werden. Das Beispiel lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        selected: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

Methode 2 stellt die Situation der Mehrfachauswahl im Auswahlfeld vor. Zuerst müssen Sie hinzufügen Wenn die Optionen im Optionsfeld festgelegt sind, kann diese Option nicht ausgewählt werden. Wenn die Optionen im Optionsfeld keinen Wert haben, wird der Text dieser Option gebunden Wenn die Optionen im Optionsfeld einen Wert haben und diese Option ausgewählt ist, wird der Wert dieser Optionen gebunden. Drücken Sie dann die Strg-Taste und klicken Sie auf die auszuwählenden Optionen. Ein einfaches Beispiel ist wie folgt :

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <select v-model="selected" multiple>
        <option disabled value="">请选择</option>
        <option>A</option>
        <option value="2">B</option>
        <option value="3">C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        selected: []
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3. V-Modell-Modifikator

3.1 .lazy

Standardmäßig synchronisiert das V-Modell den Wert der Eingabe Feld mit den Daten, nachdem jedes Eingabeereignis ausgelöst wurde. (Außer wenn die Eingabemethode Text kombiniert). Sie können den Lazy-Modifikator hinzufügen, um zur Verwendung zu wechseln Das onchange-Ereignis wird synchronisiert. Wenn Daten in das Eingabefeld eingegeben werden, werden die Daten nicht sofort geändert. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="text" id="names" v-model.lazy="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.2 .number

Wenn Sie den Eingabewert des Benutzers automatisch in einen numerischen Typ konvertieren möchten, definieren Sie Typ als Zahlentyp und fügen Sie den hinzu Zahlenmodifikator für v-model: Wenn der Benutzer numerische Daten eingibt, konvertiert v-model.number die Eingabedaten automatisch in einen numerischen Typ. Beachten Sie, dass das Zahlenattribut nicht erkannt werden kann, wenn der Benutzer den Sonderbuchstaben e eingibt Ein einfaches Codebeispiel lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <!-- 在“change”时而非“input”时更新 -->
      <input type="number" id="names" v-model.number="msg" ><br/>
      <label>输入值：</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3.3 .trim

Wenn Sie die führenden und automatisch filtern möchten Nach der Eingabe von Leerzeichen durch den Benutzer können Sie dem V-Modell einen Trimmmodifikator hinzufügen. Fügen Sie am Anfang des Eingabefelds ein paar weitere Leerzeichen hinzu, und das Trimmattribut filtert automatisch die Endleerzeichen Codebeispiel lautet wie folgt:

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <label>无trim属性</label>
      <input type="text" id="names" v-model="msg1" ><br/>
      <label>输入值：</label>{{msg1}}<br/>
      <label>有trim属性</label>
      <input type="text" id="names2" v-model.trim="msg2" ><br/>
      <label>输入值：</label>{{msg2}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg1: &#39;&#39;,
        msg2: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

4. Wird im Komponenten-V-Modell verwendet

4.1 自定义组件v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像输入框、单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。本文以自定义输入框和onchange事件为例，在输入框输入值，当光标离开以后输入值会输出绑定到置顶位置：

1. 在index中声明组件（在index声明的组件为全局组件，全局可用）：

Vue.component('base-text', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `<input type="text" id="inputs" v-on:change="$emit(&#39;change&#39;, $event.target.value)">`
});
=

2. 在要使用该组件的插件中声明：

<template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
     <base-text v-model="msg"></base-text><br/>
      <label>你输入了:</label>{{msg}}
    </div>
  </div>
</template>

<script>
  export default {
    name:"v-model",
    data(){
      return {
        title: &#39;v-model学习&#39;,
        msg: &#39;&#39;
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>

3. 结果示例如下：

相关推荐:

对4-v-bind指令的分析（附代码）

Das obige ist der detaillierte Inhalt vonAnalyse der V-Modell-Direktive in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!