Detaillierte Erläuterung der Anwendungsfälle von Vue-Formularen

Dieses Mal werde ich Ihnen den Anwendungsfall von Vue Form ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue Form?

1. Grundlegende Verwendung

Sie können den Befehl v-model verwenden, um ein bidirektionales Formular auf der Seite zu erstellen. textarea> elements Datenbindung.

Aber das V-Modell ist im Wesentlichen nur syntaktischer Zucker. Es ist dafür verantwortlich, Benutzereingabeereignisse abzuhören, um Daten zu aktualisieren, und für einige extreme Szenarien eine spezielle Verarbeitung 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 in der Datenoption der Komponente über JavaScript 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: '#app7',
 data:{
  message: '单行文本',
  message1: '多行文本',
  picked: true,
  sex: 'boy',
  hobby: ['爬山','滑雪'],
  select: 'css',
  selected: 'A',
  options: [
   { text: 'One', value: 'A' },
   { text: 'Two', value: 'B' },
   { text: 'Three', value: 'C' }
  ]
 }
});

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: '#app8',
 data:{
  picked: false,
  value: 'boy',
  toggle: false,
  value1: 'a',
  value2: 'b',
  selected: ''
 }
});

3 Ähnlich wie Ereignismodifikatoren verfügt das V-Modell auch über Modifikatoren zur Steuerung des Timings der Datensynchronisierung.

Eine Reihe von Codes, nachdem Sie die häufig verwendeten Modifikatoren lazy, number und trim gelesen haben

<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: '#app9',
 data:{
  message: '',
  number: '',
  text: ''
 }
});

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man domänenübergreifende Probleme in Vue-Projekten richtig löst

Wie man vue-cli verwendet Axios-Anfragemethode und domänenübergreifende Verarbeitung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendungsfälle von Vue-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!