vue是號稱實現了資料雙向繫結的框架，但事實上在日常開發中我們用的最多的就是 v-model 將data（vue例項中）裡面的是資料和view 相關聯，實現 data 更新，view自動重新整理的效果。但是，在移動成都上來說，這種資料雙向繫結的效果並不是特別的明顯。

今天，我用輸入框和 computed 配置來實現一個比較明顯的資料雙向繫結的效果：

先來看一下最終的效果：

主要實現的效果：

1. 改變 姓、名 兩個輸入框的內容時，姓-名、姓-名（雙向繫結）這兩個輸入框內的值將會更新；

2. 改變 姓-名 這個輸入框中的內容時，姓、名輸入框的內容不會更新；

3. 改變 姓-名（雙向繫結）這個輸入框中的內容時，姓、名輸入框的內容會同步更新（實現了資料的雙向繫結，至於 姓-名 這個輸入框中的內容改變了，那是因為 姓、名 這兩個輸入框導致的）。

主要核心程式碼：（雙向繫結）

注意：

         1. getter 和 setter 只是一個概念，並不是兩個實際的方法，

         2. getter對應的是get方法，即 獲取對應的值 時候呼叫的回撥函式

         3. setter對應的是set方法，即 監聽對應的值的改變 時候呼叫的回撥函式（注意：不是設定，不是設定，不是設定！！！

         4. 計算屬性（在使用get和set的時候）使用了箭頭函式，則this不會指向這個元件的例項；如果你必須使用箭頭函式，只有將其例項作為函式的第一個引數來訪問 即： vm => vm.a * 2

完整程式碼：

<template>
    <!-- computed 實現雙向繫結 -->
    <div class="twoWayBind">
        <!-- 姓 -->
        <p>
            <span class="title">姓：</span>
            <input type="text" class="firstName" v-model="firstName">            
        </p>

        <!-- 名 -->
        <p>
            <span class="title">名：</span>
            <input type="text" class="lastName" v-model="lastName">
        </p>       

        <!-- 顯示“姓-名”； 修改後姓、名輸入框的內容不會更新 -->
        <p>            
            <span class="title">姓-名：</span>
            <input type="text" class="fullName" v-model="fullName">
            <span class="promptCon">顯示“姓-名”； 修改後姓、名輸入框的內容不會更新</span>
        </p>

        <!-- 顯示“姓-名”； 修改後姓、名輸入框的內容會同步更新 -->
        <p>
            <span class="title">姓-名（雙向繫結）：</span>
            <input type="text" class="fullName2" v-model="fullName2">
            <span class="promptCon">顯示“姓-名”； 修改後姓、名輸入框的內容會同步更新</span>
        </p>
    </div>
</template>

<script>
export default {
    name: 'TwoWayBind',
    data(){
        return{
            firstName: 'A',
            lastName: 'B',
        }
    },
    computed: {
        fullName() {
            return this.firstName + "-" + this.lastName;
        },
        fullName2: {
            // 注意這裡不能使用箭頭函式，官網解釋：計算屬性使用了箭頭函式，則this不會指向這個元件的例項，
            //                      不過你仍然可以將其例項作為函式的第一個引數來訪問  即： vm => vm.a * 2
            get: function () {     
                return this.firstName + "-" + this.lastName;
            },
            set: function (value){      //value為使用者修改fullName2後的值
                const names = value.split('-');
                this.firstName = names[0];      //注意：這樣修改了firstName和lastName的值，會導致fullName也跟著變化
                this.lastName = names[1];
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.twoWayBind{
    p{
        margin: 10px 0px;
        display: flex;
        flex-direction: flex-start;
        .title{
            display: inline-block;
            width: 150px;
            text-align: center;
        }        
        input{
            padding: 0px 6px;
        }
        .promptCon{
            color: #aaa;
            margin-left: 10px;
        }
    }
}

</style>

 

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！