computed中的get和set方法:就是说它可以控制一个对象属性的一些特有操作,比如说读写
通过这种方式,可以在改变计算属性值的同时也改变和计算属性相关联的属性值。
<!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>计算属性:computed的getter/setter</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="box"> <h1>计算属性:computed的getter/setter</h1> <h1>姓名</h1> {{Name}} <h1>姓</h1> {{firstName}} <h1>名</h1> {{lastName}} </div> <script> var box = new Vue({ el: '#box', data: { firstName: 'Nan', lastName: 'chen', }, computed: { Name: { get: function () { return this.firstName + this.lastName }, //计算属性一般没有set方法,只读属性,只有get方法,如果传进一个新值value也可以用set去设置值,一般使用get set:function(value){ var list = value.split(' ');//split: 把一个字符串分割成字符串数组 this.firstName=list[0] this.lastName=list[1] } } } }) </script> </body> </html>
注意:
1、计算属性一般没有set方法,只读属性,只有get方法,如果传进一个新值value也可以用set去设置值,一般使用get
2、split: 把一个字符串分割成字符串数组
效果如下: