Un article expliquant en détail comment vue implémente v-model (avec des exemples de code)

Cet article vous apporte des connaissances pertinentes sur vue. Il vous présente principalement pourquoi nous utilisons v-model ? Comment utiliser vue pour implémenter v-model ? Si vous êtes intéressé, jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.

• Pourquoi utiliser v-model ? En tant qu'instruction de liaison bidirectionnelle, v-model est également l'une des deux fonctions principales de vue. Il est très pratique à utiliser et améliore l'efficacité du développement front-end. Dans la couche de vue, la couche de modèle a besoin d'une interaction de données les unes avec les autres, le modèle v peut donc être utilisé.
• Une brève description du principe du v-model

v-model fournit principalement deux fonctions. La valeur d'entrée de la couche de vue affecte la valeur d'attribut des données. Les modifications dans la valeur d'attribut de données mettront à jour les modifications numériques de. la couche de vue.

Le cœur est que d'une part, la couche modale détourne chaque attribut via DefineProperty, et une fois les modifications détectées, elle est mise à jour via les éléments de page pertinents. D'autre part, en compilant le fichier modèle, l'événement d'entrée est lié au modèle V du contrôle, de sorte que l'entrée de la page puisse mettre à jour les valeurs d'attribut de données pertinentes en temps réel.

• Qu'est-ce que le modèle V v-model est l'instruction de liaison bidirectionnelle de Vue. Elle peut mettre à jour de manière synchrone la valeur saisie par le contrôle sur la page avec l'attribut de données lié approprié. Elle mettra également à jour la valeur du contrôle d'entrée sur la page lorsque l'attribut de liaison de données est activé. mis à jour.

Méthode d'implémentation vue2.0

• Composant parent

<template>
  <div id="app">
    {{username}} <br/>
    <my-input type="text" v-model="username"></my-input>
  </div>
</template>

<script>
import myinput from &#39;./components/myinput&#39;
export default {
  name: &#39;App&#39;,
  components:{
      myinput
  },
  data(){
    return {
      username:&#39;&#39;
    }
  }

}
</script>

• myinput.vue :

<template>
    <div class="my-input">
        <input type="text" class="my-input__inner" @input="handleInput"/>
    </div>
</template>

<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:&#39;&#39;
            }
        },
        methods:{
            handleInput(e){
                this.$emit(&#39;input&#39;,e.target.value) //触发父组件的input事件
            }
        }
    }
</script>

La chose la plus courante est de contrôler l'affichage et la fermeture de la boîte modale. Nous pouvons également utiliser v-model pour. Le composant el-dialog de l'élément est un exemple

• App.vue

<template>
    <div>
        <kmDialog
            v-model="showDialog"
        >
        <el-button @click="show">点我</el-button>
    </div>
</template>
<script>
    import kmDialog from &#39;KmDialog.vue&#39;
    export default {
        components: {
            KmDialog
        }
        data () {
            return {
                showDialog: false
            }
        },
        methods: {
            show() {
                this.showDialog = true
            }
        }
    }
</script>

• KmDialog.vue

<template>
    <el-dialog
        :title="isEdit ? &#39;编辑设备&#39; : &#39;新增设备&#39;"
        :visible.sync="value"
        width="40%"
        @close="cancel"
      >
        <span>这是一段信息</span>
    </el-dialog>
</template>
<script>
    export default {
        props: {
            value: {
                default: false,
                type: Boolean
            }
        },
        methods: {
            cancel() {
                this.$emit(&#39;input&#39;, false)
            }
        }
    }
</script>

Apprentissage recommandé : "tutoriel vidéo vue.js"

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!