Explication détaillée des cas d'utilisation du formulaire vue

Cette fois, je vais vous apporter une explication détaillée du cas d'utilisation de vue form. Quelles sont les précautions lors de l'utilisation de vue form. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Utilisation de base

Vous pouvez utiliser la commande v-model pour créer un formulaire bidirectionnel sur les champs textarea> éléments Liaison de données.

Mais le modèle V n'est essentiellement que du sucre syntaxique. Il est chargé d'écouter les événements d'entrée de l'utilisateur pour mettre à jour les données et effectuer un traitement spécial pour certains scénarios extrêmes.

v-model ignorera les valeurs initiales des attributs value, vérifié et sélectionné de tous les éléments du formulaire et utilisera toujours les données de l'instance Vue comme source de données. Vous devez déclarer la valeur initiale dans l'option data du composant via JavaScript.

Un ensemble de codes, après avoir lu l'utilisation de base du texte, de la zone de texte, de la radio, de la case à cocher et sélectionnez :

<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' }
  ]
 }
});

Liaison de valeur.

Lorsque les boutons radio, les cases à cocher et les listes de sélection sont utilisés seuls ou en mode sélection radio, la valeur liée au v-model est une chaîne statique ou une valeur booléenne, mais en entreprise, cela est parfois nécessaire La liaison de données dynamiques peut être réalisée à l'aide de v-bind.

Un ensemble de codes. Après avoir lu les liaisons de valeurs couramment utilisées pour la radio, cochez la case et sélectionnez dans les formulaires :

 <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: ''
 }
});

Modificateurs

Semblable aux modificateurs d'événement, v-model dispose également de modificateurs pour contrôler le moment de la synchronisation des données.

Un ensemble de codes, après avoir lu les modificateurs couramment utilisés paresseux, nombre et garniture

<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: ''
 }
});

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour plus d'excitant. Pour plus d'informations, veuillez prêter attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Comment résoudre correctement les problèmes inter-domaines dans les projets Vue

Comment utiliser vue-cli axios Méthode de requête et traitement inter-domaines

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!