Detaillierte Erklärung des Vue-Formulars

Sie können die V-Model-Direktive verwenden, um eine bidirektionale Datenbindung für Formularsteuerelemente zu erstellen. In diesem Artikel wird hauptsächlich die detaillierte Erklärung von Vue-Formularen vorgestellt.

1 v-model Die Direktive erstellt eine bidirektionale Datenbindung für die Elemente Aber das V-Modell ist im Wesentlichen nur syntaktischer Zucker. Es ist dafür verantwortlich, Benutzereingabeereignisse abzuhören, um Daten zu aktualisieren und eine spezielle Verarbeitung für einige extreme Szenarien durchzuführen.

v-model ignoriert die Anfangswerte der Wert-, Prüf- und ausgewählten Attribute aller Formularelemente und verwendet immer die Daten der Vue-Instanz als Datenquelle. Sie sollten den Anfangswert über JavaScript in der Datenoption der Komponente deklarieren.

Eine Reihe von Codes, nachdem Sie die grundlegende Verwendung von Text, Textbereich, Radio, Kontrollkästchen gelesen und ausgewählt haben:

<p id="app7">
  <input type="text" v-model="message"><label>{{message}}</label></br>
  <textarea v-model="message1"></textarea><label>{{message1}}</label></br>
  <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->
  <input type="radio" :checked="picked"><label>单选按钮</label></br>
  <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->
  <input type="radio" v-model="sex" value="boy"><label>男</label>
  <input type="radio" v-model="sex" value="girl"><label>女</label></br>
  <!--复选框使用数组类型的数据匹配-->
  <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>
  <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>
  <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>
  <!--单选时的选择框,多选时加multiple属性就可以了-->
  <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->
  <select v-model="select">
   <option disabled value="">请选择</option>
   <option>html</option>
   <option value="js">javascript</option>
   <option>css</option>
  </select>
  <!--用 v-for 渲染的动态选项-->
  <select v-model="selected">
   <option v-for="option in options" :value="option.value">
    {{option.text}}
   </option>
  </select>
 </p>

var app7 = new Vue({
 el: &#39;#app7&#39;,
 data:{
  message: &#39;单行文本&#39;,
  message1: &#39;多行文本&#39;,
  picked: true,
  sex: &#39;boy&#39;,
  hobby: [&#39;爬山&#39;,&#39;滑雪&#39;],
  select: &#39;css&#39;,
  selected: &#39;A&#39;,
  options: [
   { text: &#39;One&#39;, value: &#39;A&#39; },
   { text: &#39;Two&#39;, value: &#39;B&#39; },
   { text: &#39;Three&#39;, value: &#39;C&#39; }
  ]
 }
});

2. Wertbindung

Wenn Optionsfelder, Kontrollkästchen und Auswahllisten einzeln oder im Optionsauswahlmodus verwendet werden, ist der an das V-Modell gebundene Wert eine statische Zeichenfolge oder ein boolescher Wert. Im Geschäftsleben ist jedoch manchmal eine dynamische Bindung erforderlich Daten können mit v-bind implementiert werden. Eine Reihe von Codes. Nachdem Sie die häufig verwendeten Wertebindungen für Radio gelesen haben, aktivieren Sie das Kontrollkästchen und wählen Sie in Formularen aus:

 <p id="app8">
  <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{{picked}}</p>
  <p>{{value}}</p>

  <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->
  <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
  <label>复选框</label>
  <p>{{toggle}}</p>
  <p>{{value1}}</p>
  <p>{{value2}}</p>

  <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->
  <select v-model="selected">
   <option :value="{number:123}">123</option>
  </select>
  {{selected.number}}
 </p>

var app8 = new Vue({
 el: &#39;#app8&#39;,
 data:{
  picked: false,
  value: &#39;boy&#39;,
  toggle: false,
  value1: &#39;a&#39;,
  value2: &#39;b&#39;,
  selected: &#39;&#39;
 }
});

3

Ähnlich wie Ereignismodifikatoren verfügt das V-Modell auch über Modifikatoren zur Steuerung des Timings der Datensynchronisierung. Eine Reihe von Codes, nachdem ich die häufig verwendeten Modifikatoren Lazy, Number und Trim gelesen habe

<p id="app9">
  <!-- .lazy:
  在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），
  使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->
  <input type="text" v-model.lazy="message">
  <p>{{message}}</p>
  <!--.number:
  使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->
  <input type="text" v-model.number="number">
  <p>{{typeof number}}</p>
  <!-- .trim:
  修饰符.trim 可以自动过滤输入的首尾空格-->
  <input type="text" v-model="text">
  <p>{{text}}</p>
 </p>
var app9 = new Vue({
 el: &#39;#app9&#39;,
 data:{
  message: &#39;&#39;,
  number: &#39;&#39;,
  text: &#39;&#39;
 }
});

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

Detaillierte Erklärung der Browser- und Serverinteraktion in Ajax

AJAX-Framework zum Erlernen von AJAX von Grund auf

Lernen Sie AJAX von Grund auf und erstellen Sie ein automatisch verifiziertes Formular

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Vue-Formulars. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!