Comment utiliser v-model pour lier l'abréviation des éléments de formulaire dans Vue

Abréviation indiquant comment utiliser v-model pour lier des éléments de formulaire dans Vue

Vue est un framework JavaScript populaire qui permet de créer rapidement des applications interactives. Vue fournit de nombreuses directives pratiques, l'une des plus couramment utilisées est "v-model".

La directive "v-model" peut être utilisée pour lier des éléments de formulaire avec des propriétés de données dans une instance Vue. La directive "v-model" peut automatiquement mettre à jour les attributs de données lorsque l'utilisateur modifie la saisie du formulaire, et lorsque l'attribut de données change, la saisie du formulaire sera également automatiquement mise à jour.

Cependant, dans les applications pratiques, la directive "v-model" peut parfois paraître lourde et longue. Vue fournit donc quelques abréviations pour la directive "v-model" afin de la rendre plus pratique lors de l'écriture de code.

Ci-dessous, nous expliquerons comment utiliser l'abréviation de la directive "v-model" dans Vue.

1. Abréviation de la zone de texte
La commande "v-model" de la zone de texte peut être abrégée avec "v-model="msg"". Parmi eux, msg est le nom de l'attribut data dans l'instance Vue.

Par exemple :

<template>
  <div>
    <input v-model="msg" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

est abrégé en :

<template>
  <div>
    <input :value="msg" @input="msg=$event.target.value" placeholder="请输入文本">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: ''
      }
    }
  }
</script>

2 Abréviation de boîte à sélection multiple
La commande "v-model" de la boîte à sélection multiple peut être utilisée ":checked="checkedValue"" et ". @change="onCheckedChange"" pour abréger.

Par exemple :

<template>
  <div>
    <input type="checkbox" v-model="checkedValue">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

est abrégé en :

<template>
  <div>
    <input type="checkbox" :checked="checkedValue" @change="onCheckedChange">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(event) {
        this.checkedValue = event.target.checked;
      }
    }
  }
</script>

3 Abréviation du bouton radio
La directive "v-model" du bouton radio peut être utilisée ":checked="checkedValue"" et "@change=". onCheckedChange"" pour abréger.

Par exemple :

<template>
  <div>
    <input type="radio" v-model="checkedValue" value="1">
    <input type="radio" v-model="checkedValue" value="2">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    }
  }
</script>

est abrégé en :

<template>
  <div>
    <input type="radio" :checked="checkedValue === '1'" @change="onCheckedChange('1')">
    <input type="radio" :checked="checkedValue === '2'" @change="onCheckedChange('2')">
    <p>{{ checkedValue }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkedValue: ''
      }
    },
    methods: {
      onCheckedChange(value) {
        this.checkedValue = value;
      }
    }
  }
</script>

En résumé, l'abréviation de la directive "v-model" dans Vue rend le code plus concis et plus facile à lire, mais vous devez faire attention à l'utilisation correcte de l'abréviation. Dans le développement réel, vous pouvez choisir d'utiliser une méthode d'abréviation appropriée en fonction de vos propres besoins.

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!