1.通过计算属性，改变内容
fullName不再放在data中声明，而是作为一个方法，在computed中声明，此方法就是一个回调函数，将框一的内容和框二的内容进行组合，框一内容改变或者框二内容改变都会触发这个回调函数
2.通过监视属性，改变内容
注意监视的两种写法
监视属性其实就是通过监视某个属性的变化，从而来触发某个函数，比如例子中我们想通过监视框一或者框二内容的变化，来触发我们的回调函数以此达到框一框二变化，我们的fullName2内容也会同步变化
3.计算属性的另一种写法
通过getter/setter实现对属性数据的显示和监视
首先通过get方法在fullName3中显示出框一加框二的内容从而达成firstName和lastName内容改变，fullName3内容也会跟着改变
即 return this.firstName + '-' + this.lastName
然后通过set方法将监视到的改变过后的框一内容和框二内容的重新赋值给firstName和lastName，从而达成，fullName3内容改变，firstName和lastName内容也会跟着改变，
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
<div id="app">
姓：<input type="text" v-model="firstName">
名：<input type="text" v-model="lastName">
姓名1（单向：通过计算属性改变值）<input type="text" v-model="fullName1">
姓名2（单向：通过监听改变值）<input type="text" v-model="fullName2">
姓名3（双向：通过计算属性改变值）<input type="text" v-model="fullName3">
var vm =new Vue({
el:"#app",
data: {
firstName:'框1的内容',
lastName:'框2的内容',
fullName2:''
},
computed: {
fullName1() {
return this.firstName +'-' +this.lastName
},//通过计算属性改变fullName的值，fullName不再放到data中取声明，而是作为一个方法，在computed中声明，方法的内容就是返回一个值
fullName3: {
get() {
return this.firstName +'-' +this.lastName
},
set(value){
const names = value.split('-')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
firstName(value) {
this.fullName2 = value +'-' +this.lastName
},
}
})
vm.$watch('lastName', function (value) {
this.fullName2 =this.firstName +'-' + value
})
</html>
