<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>姓名:{{ fullname }}</p> <button @click="change()">修改姓名</button> </div> <script> let vm = new Vue({ el:'#app', data:{ surname:'韦', name:'小宝' }, computed:{ // 计算属性的简写形式~ // fullname:function(){ // return this.surname+this.name // } //计算属性的完整写法~ fullname:{ // 计算属性的gitter get: function(){ return this.surname+this.name }, // 计算属性的setter,用于设置计算属性的值~ set: function(value){ //value用来保存计算属性的新值,在这个程序value的值就是 张无忌~ this.surname = value[0] //取出张 这个字~ this.name = value.substr(1,2) //取出 无忌 这两个字~ } } }, methods:{ change:function(){ this.fullname = '张无忌' } } }) </script> </body> </html>
