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

如图：

目的：修改姓名时，修改全名，修改全名时也会修改姓名信息

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>