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

最新推荐文章于 2025-05-01 22:40:54 发布

商朝

最新推荐文章于 2025-05-01 22:40:54 发布

阅读量2.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端零碎问题文章标签： vue

本文链接：https://blog.youkuaiyun.com/t_t2_3/article/details/124604901

前端同时被 2 个专栏收录

25 篇文章

订阅专栏

零碎问题

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

根据前一个表单项用户选取的值，动态选择后面的表单项应该绑定哪个属性。比如前者选了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  
      		},
    	},
	}
}