Artikel yang menerangkan secara terperinci cara vue melaksanakan model v (dengan contoh kod)

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue terutamanya memperkenalkan kepada anda mengapa kami menggunakan v-model? Bagaimana untuk menggunakan vue untuk melaksanakan model v. Jika anda berminat, mari lihat saya harap ia akan membantu semua orang.

• Mengapa menggunakan v-model? Sebagai arahan mengikat dua hala, model v juga merupakan salah satu daripada dua fungsi teras vue Ia sangat mudah digunakan dan meningkatkan kecekapan pembangunan bahagian hadapan. Dalam lapisan paparan, lapisan model memerlukan interaksi data antara satu sama lain, jadi model v boleh digunakan.
• Penerangan ringkas tentang prinsip v-model

v-model terutamanya menyediakan dua fungsi Nilai input lapisan paparan mempengaruhi nilai atribut data nilai atribut data berubah, paparan akan dikemas kini Nilai lapisan berubah.

Intinya ialah di satu pihak, lapisan modal merampas setiap atribut melalui defineProperty, dan setelah perubahan dikesan, ia dikemas kini melalui elemen halaman yang berkaitan. Sebaliknya, dengan menyusun fail templat, peristiwa input terikat kepada model v kawalan, supaya input halaman boleh mengemas kini nilai atribut data yang berkaitan dalam masa nyata.

• Apakah itu v-model? v-model ialah arahan pengikatan dua hala Vue Ia boleh mengemas kini nilai yang dimasukkan oleh kawalan pada halaman secara serentak kepada atribut data terikat yang berkaitan. Ia juga akan mengemas kini nilai kawalan input pada halaman apabila atribut mengikat data dikemas kini.

kaedah pelaksanaan vue2.0

• Komponen induk

<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>

Perkara yang paling biasa ialah mengawal paparan dan penutupan kotak modal Kita juga boleh menggunakan v-model, mengambil komponen el-dialog elemen sebagai contoh

• . 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>

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara vue melaksanakan model v (dengan contoh kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!