注意:
this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题
练习代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="fullName"> <br> firstName: <input type="text" v-model="firstName"/> <br> lastName: <input type="text" v-model="lastName"/> </div> <script> var app=new Vue({ el:'#app', data:{ firstName:'Jack', lastName:'Green' }, computed:{ fullName:{ //getter,用于读取 get:function(){ return this.firstName+' '+this.lastName; }, set:function(newValue){ var names=newValue.split(' '); this.firstName=names[0]; // this.lastName=names[1]; 这样子在多个连续空格的情况下,lastname消失的 this.lastName=names[names.length-1]; } } } }) </script> </body> </html>