Vue – Detaillierte Erläuterung der Formulareingabebindung

Detaillierte Erläuterung der Formulareingabebindung von Vue.js

In der Webentwicklung sind Formulare eine der wichtigen Möglichkeiten für Benutzer, mit Anwendungen zu interagieren. Vue.js bietet einen leistungsstarken Bindungsmechanismus für Formulareingaben, der die Verarbeitung von Benutzereingaben prägnanter und effizienter macht. In diesem Blog werden die verschiedenen Verwendungsmöglichkeiten der Formulareingabebindung in Vue.js eingehend untersucht, einschließlich Texteingabe, mehrzeiliger Text, Kontrollkästchen, Optionsfelder, Dropdown-Auswahlfelder, Mehrfachauswahlfelder und die Verwendung von Modifikatoren.

Text Eingabe

Schauen wir uns zunächst die Bindung des Texteingabefelds an. Durch v-modeldie Direktive können wir problemlos eine bidirektionale Bindung des Texteingabefelds und der Daten erreichen. Hier ist ein einfaches Beispiel:

<label for="textInput">输入文本：</label>
<input id="textInput" v-model="text" placeholder="输入文本" />
<p>输入的文本是: {
   
   { text }}</p>

Im obigen Code ist der Wert des Texteingabefelds v-modelan die Daten in der Vue-Instanz textgebunden . Wenn der Benutzer Inhalte in das Eingabefeld eingibt, textwird der Wert von automatisch aktualisiert und der auf der Seite angezeigte Text wird ebenfalls aktualisiert.

Mehrzeilige Texteingabe

Für mehrzeilige Texteingaben verwenden wir <textarea>das Element und nutzen es auch v-modelfür die Datenbindung. Hier ist ein Beispiel:

<label for="textArea">多行文本：</label>
<textarea id="textArea" v-model="message" placeholder="输入多行文本"></textarea>
<p>多行文本是:</p>
<pre>{
   
   { message }}</pre>

<textarea>Der darin enthaltene Inhalt messageist in zwei Richtungen an die Daten in der Vue-Instanz gebunden. Wenn der Benutzer Inhalte in das mehrzeilige Texteingabefeld eingibt, messagewird der Wert von entsprechend aktualisiert und der Inhalt auf der Seite ändert sich ebenfalls synchron.

Kontrollkästchen

Beim Umgang mit Kontrollkästchen können wir v-modeleinen booleschen Wert zum Binden verwenden. Hier ist ein einfaches Kontrollkästchen-Beispiel:

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">复选框状态: {
   
   { checked }}</label>

Der Status des Kontrollkästchens checkedwird über Daten mit den Daten in der Vue-Instanz verknüpft. Wenn der Benutzer das Kontrollkästchen aktiviert oder deaktiviert, checkedwird der Wert von synchron aktualisiert, wodurch eine bidirektionale Bindung erreicht wird.

Einzelknopf

Beim Umgang mit Optionsfeldern können wir für jede Schaltfläche das Gleiche v-modelund für jede Schaltfläche ein anderes festlegen value. Auf diese Weise wird der Wert der ausgewählten Schaltfläche an die entsprechenden Daten in der Vue-Instanz gebunden. Hier ist ein Beispiel für ein Optionsfeld:

<input type="radio" id="option1" value="Option 1" v-model="picked" />
<label for="option1">选项 1</label>

<input type="radio" id="option2" value="Option 2" v-model="picked" />
<label for="option2">选项 2</label>

<p>当前选择: {
   
   { picked }}</p>

Im obigen Code pickedspeichern die Daten den Wert des ausgewählten Optionsfelds und realisieren so eine bidirektionale Bindung des Optionsfelds und der Daten.

Dropdown-Auswahlfeld

Wenn wir das Dropdown-Auswahlfeld verwenden, können wir v-modelden ausgewählten Wert an die Daten in der Vue-Instanz binden. Hier ist ein Beispiel für ein einfaches Dropdown-Auswahlfeld:

<label for="selectBox">下拉选择框：</label>
<select v-model="selected">
  <option value="">请选择一个选项</option>
  <option value="Option A">选项 A</option>
  <option value="Option B">选项 B</option>
  <option value="Option C">选项 C</option>
</select>
<p>当前选择: {
   
   { selected }}</p>

Wenn der Benutzer im obigen Code eine Option in der Dropdown-Liste auswählt, selectedwird der Wert von aktualisiert und die auf der Seite angezeigte aktuelle Auswahl wird ebenfalls in Echtzeit aktualisiert.

Kontrollkästchen

Für Mehrfachauswahlfelder können wir multipledie Mehrfachauswahlfunktion durch Hinzufügen von Attributen implementieren. Ebenso v-modelzur Datenbindung verwenden. Hier ist ein Beispiel für ein Mehrfachauswahlfeld:

<label for="multiSelectBox">多选框：</label>
<select v-model="selectedMultiple" multiple>
  <option value="Option A">选项 A</option>
  <option value="Option B">选项 B</option>
  <option value="Option C">选项 C</option>
</select>
<p>当前选择: {
   
   { selectedMultiple }}</p>

selectedMultipleDie Daten speichern die Werte mehrerer vom Benutzer ausgewählter Optionen und realisieren so eine bidirektionale Bindung zwischen dem Mehrfachauswahlfeld und den Daten.

Modifier-Demo

Vue.js bietet außerdem einige Modifikatoren zum Ändern des Standardverhaltens von Formulareingaben. Hier ist eine Demonstration einiger Modifikatoren:

• Lazy-Modifikator : Verwenden Sie .lazyden Modifikator, um die Datenbindung zu verzögern, bis changedas Ereignis anstelle inputdes Ereignisses ausgelöst wird. Dies ist nützlich, wenn große Eingabemengen verarbeitet werden.

<label for="lazyInput">Lazy 输入：</label>
<input id="lazyInput" v-model.lazy="lazyText" />
<p>Lazy 文本: {
   
   { lazyText }}</p>

• Zahlenmodifikator : Verwenden Sie .numberden Modifikator, um vom Benutzer eingegebene Werte automatisch in numerische Typen umzuwandeln. Dies ist sehr praktisch in Situationen, in denen Sie Zahlen eingeben müssen.

<label for="numberInput">数字输入：</label>
<input id="numberInput" v-model.number="numericValue" />
<p>数字值: {
   
   { numericValue }}</p>

• Trim-Modifikator : Verwenden Sie .trimden Modifikator, um Leerzeichen an beiden Enden der Benutzereingabe automatisch zu entfernen. Dies ist nützlich, um unnötige Leerzeichen beim Tippen des Benutzers zu entfernen.

<label for="trimInput">去除空格输入：</label>
<input id="trimInput" v-model.trim="trimmedText" />
<p>去除空格后的文本: {
   
   { trimmedText }}</p>

Durch die entsprechende Verwendung dieser Modifikatoren können wir Benutzereingaben flexibler verarbeiten und die Benutzererfahrung verbessern.
Vollständiger Code:

<template>
  <div>
    <!-- 文本输入 -->
    <label for="textInput">输入文本：</label>
    <input id="textInput" v-model="text" placeholder="输入文本" />
    <p>输入的文本是: {
   
   { text }}</p>

    <!-- 多行文本输入 -->
    <label for="textArea">多行文本：</label>
    <textarea id="textArea" v-model="message" placeholder="输入多行文本"></textarea>
    <p>多行文本是:</p>
    <pre>{
   
   { message }}</pre>

    <!-- 复选框 -->
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">复选框状态: {
   
   { checked }}</label>

    <!-- 单选按钮 -->
    <input type="radio" id="option1" value="Option 1" v-model="picked" />
    <label for="option1">选项 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="picked" />
    <label for="option2">选项 2</label>

    <p>当前选择: {
   
   { picked }}</p>

    <!-- 下拉选择框 -->
    <label for="selectBox">下拉选择框：</label>
    <select v-model="selected">
      <option value="">请选择一个选项</option>
      <option value="Option A">选项 A</option>
      <option value="Option B">选项 B</option>
      <option value="Option C">选项 C</option>
    </select>
    <p>当前选择: {
   
   { selected }}</p>

    <!-- 多选框 -->
    <label for="multiSelectBox">多选框：</label>
    <select v-model="selectedMultiple" multiple>
      <option value="Option A">选项 A</option>
      <option value="Option B">选项 B</option>
      <option value="Option C">选项 C</option>
    </select>
    <p>当前选择: {
   
   { selectedMultiple }}</p>

    <!-- 修饰符演示 -->
    <label for="lazyInput">Lazy 输入：</label>
    <input id="lazyInput" v-model.lazy="lazyText" />
    <p>Lazy 文本: {
   
   { lazyText }}</p>

    <label for="numberInput">数字输入：</label>
    <input id="numberInput" v-model.number="numericValue" />
    <p>数字值: {
   
   { numericValue }}</p>

    <label for="trimInput">去除空格输入：</label>
    <input id="trimInput" v-model.trim="trimmedText" />
    <p>去除空格后的文本: {
   
   { trimmedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 文本输入
      text: "",

      // 多行文本输入
      message: "",

      // 复选框
      checked: false,

      // 单选按钮
      picked: "",

      // 下拉选择框
      selected: "",

      // 多选框
      selectedMultiple: [],

      // 修饰符演示
      lazyText: "",
      numericValue: 0,
      trimmedText: ""
    };
  }
};
</script>