vue 计算属性和监视属性都可实现要实现名字中全名、名、姓同步修改

属性和监视属性都可实现要实现名字中全名、名、姓同步修改"/>

vue 计算属性和监视属性都可实现要实现名字中全名、名、姓同步修改

vue 计算属性和监视属性都可实现要实现名字中全名、名、姓同步修改

例：要实现名字中全名、名、姓同步修改
一.结构

<div id="app"><span>firstName:</span><input type="text" v-model="firstName" /><br /><span>lastName:</span><input type="text" v-model="lastName" /><br /><span>fullName(vue计算) :</span><input type="text" v-model="fullName" /><br /><span>fullName1(vue监视) :</span><input type="text" v-model="fullName1" /><br /></div>

二.js

new Vue({el: "#app",data: {firstName: "wang",lastName: "baobao",fullName1: "baobao-wang", //vue},// 两种方法都可实现：// 方法一.计算属性 -- fullNamecomputed: {fullName: {// 读取get: function () {return this.lastName + "-" + this.firstName},// 设置set: function (value) {const [lastName, firstName] = value.split("-")this.firstName = firstNamethis.lastName = lastName},}},// 方法二.监视属性 -- firstName lastName fullNamewatch: {firstName: function (news, old) {this.fullName1 = this.lastName + "-" + news},lastName: function (news) {this.fullName1 = news + "-" + this.firstName},fullName1: function (news) {const [lastName, firstName] = news.split("-")this.firstName = firstNamethis.lastName = lastName}}})

效果：