v-model动态选取绑定的属性

最新推荐文章于 2025-10-05 15:06:03 发布

原创最新推荐文章于 2025-10-05 15:06:03 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

零碎问题

9 篇文章

订阅专栏

本文探讨了一个前端开发中常见的问题，如何在Vue应用中根据用户选择动态绑定表单字段。通过计算属性的方式，作者展示了如何有效避免三目表达式的限制，实现表单元素的条件绑定。

需求：

根据前一个表单项用户选取的值，动态选择后面的表单项应该绑定哪个属性。比如前者选了1，那么后者绑定formObj.stu,选2，后者绑定formObj.tea

坑

那么针对这个场景我们第一个想法肯定是三目,你肯定会写出如下的代码

<el-input :v-model:'formObj.xx == 1?this.formObj.stu':'this.formObj.tea'>
</el-input>

恭喜你，这么些不生效。因为vue有自己的规则针对v-model是不允许使用表达式或者函数的

解决方案

我们使用计算属性来解决这个问题
代码如下

<el-input v-model='formCom'></el-input>
export default{
	...
	computed:{
		formCom: {
     		 get() {
         		return this.formObj.xx == 1?this.formObj.stu:this.formObj.tea       
    		  },
      		set(val) {
         		this.formObj.xx == 1?this.formObj.stu =val:this.formObj.tea =val  
      		},
    	},
	}
}