在v-model中無法使用表達式的解決方法

當我們想要使用複雜一點邏輯來決定具體使用哪個屬性時，就會遇到v-model本身只支持簡單的數據屬性，並不支持表達式。

有兩種方法可以滿足：

1、使用計算屬性+getter\setter

<div id="demo">
        姓：<input type="text" placeholder="firstName" v-model="firstName"><br>
        名：<input type="text" placeholder="lastName" v-model="lastName"><br>
        姓名1(單向):<input type="text" placeholder="FullName1" v-model="fullName1"><br>
        姓名2(雙向):<input type="text" placeholder="FullName2" v-model="fullName2"><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const demo = new Vue({
        el : '#demo',
        data : {
            firstName : 'A',
            lastName : 'B',
            fullName2 : 'A B'
        },
        computed : {//計算屬性相當於data裏的屬性
            //什麼時候執行：初始化顯示/ 相關的data屬性發生變化
            fullName1(){//計算屬性中的get方法，方法的返回值就是屬性值
                return this.firstName + ' ' + this.lastName
            },
 
            fullName2 : {
                get(){//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
                    return this.firstName + ' ' + this.lastName
                },
                set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
                    //val就是fullName3的最新屬性值
                    console.log(val)
                    const names = val.split(' ');
                    console.log(names)
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
 
    })
 
 
</script>

2、v-model是個語法糖，使用其原本的方式

語法糖

<input v-model="message">

原本

<input :value="message" @input="message = $event.target.value">

這裏的message就可以使用一個動態的屬性名。