一文詳解vue怎麼實作v-model（附程式碼範例）

本篇文章為大家帶來了關於vue的相關知識，其中主要為大家介紹了我們為什麼使用v-model？用vue怎麼實現v-model的，有興趣的朋友一起來看吧，希望對大家有幫助。

• 為什麼要使用v-model? v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發效率。在view層，model層相互需要資料交互，即可使用v-model。
• v-model的原理簡單描述

v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值改變會更新view層的數值變化。

其核心就是，一方面modal層透過defineProperty來劫持每個屬性，一旦監聽到變更透過相關的頁面元素更新。另一方面透過編譯模板文件，為控制項的v-model綁定input事件，從而頁面輸入能即時更新相關data屬性值。

• v-model是什麼 v-model就是vue的雙向綁定的指令，能將頁面上控制項輸入的值同步更新到相關綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控制項的值。

vue2.0實作方法

• 父元件

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

最常見的還有一種事控制模態框的展示與關閉，我們也可以用v-model 以element 的el-dialog元件為範例

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

推薦學習：《vue.js影片教學》

以上是一文詳解vue怎麼實作v-model（附程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！