Vue使用computed实现计算属性的单向绑定和双向绑定

lovoo

已于 2023-03-30 21:33:15 修改

阅读量1.1k

点赞数

分类专栏： # Vue+ElementUI 文章标签： vue.js 前端 javascript 数据绑定 computed

于 2023-03-30 21:26:20 首次发布

本文链接：https://blog.csdn.net/lovoo/article/details/129866988

版权

Vue+ElementUI 专栏收录该内容

20 篇文章

订阅专栏

文章展示了如何在Vue.js应用中使用v-model和computedproperties实现姓名的全称与分段姓名之间的双向绑定。当输入全名时，姓和名会自动更新；修改姓或名时，全名也会相应改变。

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

如图：

在这里插入图片描述
目的：修改姓名时，修改全名，修改全名时也会修改姓名信息

1、在页面添加四个input，分别保存姓、名、姓名全称1、姓名全称2

<div id="app">
      姓: <input placeholder="First Name" v-model="firstName" /><br />
      名: <input placeholder="Last Name" v-model="lastName" /><br />
      姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
      姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
  </div>

2、在data中定义属性firstName、lastName

data() {
	return {
		firstName: '',
		lastName: '',
	}
},

3、在computed中计算属性fullName1 = firstName + lastName

computed: {
      fullName1() {
           console.log('计算fullName1')
           return this.firstName + ' ' + this.lastName
       },
}

4、在fullName2对应的input中修改数据时，同时修改firstName与lastName值，这里要用到get与set方法。

对value值进行切割，分别赋予firstName与lastName

computed: {
      fullName1() {
           console.log('计算fullName1')
           return this.firstName + ' ' + this.lastName
       },
}
fullName2:{
	get(){
		return this.firstName + " " + this.lastName
	}
	set(value){
		let names = value.split(" ")
		this.firstName = names[0]
		this.lastName = names[1]
	}
}

5、全部代码

<template>
	<div>
		<div>
			姓: <input type="text" v-model="firstName">
			<br/>
			名: <input type="text" v-model="lastName">
			<br/>
			全名称：{{fullName1}}
			<br/>
			<input type="text" v-model="fullName2">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				firstName: '',
				lastName: '',
			}
		},
		computed:{
			fullName1(){
				return this.firstName + " " + this.lastName
			},
			fullName2:{
				get(){
					return this.firstName + " " + this.lastName
				}
				set(value){
					let names = value.split(" ")
					this.firstName = names[0]
					this.lastName = names[1]
				}
			}
		}
	}
</script>

<style>
</style>