在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就可以使用一个动态的属性名。