都有注释，简单易懂
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script> <body> <div class="demo"> <p>姓名：<input type="text" v-model="fullName" /></p> <p> 姓：<input type="text" v-model="firstName" /> 名：<input type="text" v-model="lastName" /> </p> </div> </body> <script type="text/javascript"> var demo = new Vue({ el: ".demo", data: { firstName: '', lastName: '', fuxing: ['欧阳', '慕容', '司马']/* 复姓数组 */ }, computed: { fullName: { get: function() { return this.firstName + this.lastName/* 名加姓 */ }, set: function(newName) { if (newName == '') { /* 如果不为空，就会出undefinde */ newName = '' } else { /* 不是复姓*/ var flag = 0 var temp = newName.slice(0, 2) for (var i = 0; i < this.fuxing.length; i++) { if (temp == this.fuxing[i]) { /* 是复姓就执行 */ flag = 1; break } } if (flag == 0) { /* 不是复姓*/ this.firstName = newName[0] this.lastName = newName.slice(1)/* 不管名字几个字，都从第一个开始以后都是名字 */ } else { /* 是复姓就执行 */ this.firstName = temp this.lastName = newName.slice(2)/* 不管名字几个字，都从第二个开始以后都是名字 */ } } } } } }) </script> </html>