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