3-5计算属性的setter和getter · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性的setter和getter</title> <script src="vue.js"></script> </head> <body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'Han', lastName: 'MeiMei', }, // 计算属性有缓存的概念对应的数据发生了变化,会重新计算 computed: { // fullName(){ // console.log('计算了一次') // return this.firstName+" "+this.lastName // } fullName: { // get: function () { get() { return this.firstName + ' ' + this.lastName; }, set: function (value) { console.log(value) var arr = value.split(' ') this.firstName = arr[0] this.lastName = arr[1] } } } }); </script> </body> </html> ~~~