计算属性的属性
默认的，计算属性实现了 getter 属性，我们可以直接拿到计算属性的值。但是如果尝试对计算属性的值进行修改，会成功吗？
网络异常，图片无法展示
|
如上，不出意外的在对计算属性进行 setter 操作的时候失败了，Vue 提示我们计算属性 infoc 没有 setter 属性。
实现计算属性的 setter 属性
代码-HTMl
<div id='app2'> {{ infoc }} </div> 复制代码
代码-JS
<script> var app2 = new Vue({ el: "#app2", data: { msg1: "hello", msg2: "phyger", info: "hello phyger" }, watch:{ msg1: function(){ this.info = this.msg1 + ' ' + this.msg2 }, msg2: function(){ this.info = this.msg1 + ' ' + this.msg2 } }, computed: { infoc:{ get: function(){ return this.msg1+' '+this.msg2 }, set: function(newValue){ var temInfo = newValue.split(' ') this.msg1=temInfo[0] this.msg2=temInfo[temInfo.length-1] } } } }) </script> 复制代码
页面效果
网络异常，图片无法展示
|
可以看到，在计算属性中实现 setter 属性后，计算属性已经可以进行赋值操作了。而且在赋值过程中，msg1 和 msg2 的值都发生了变化。
Tip
在计算属性中定义 setter 属性的时候，infoc 已经由原来的方法变成了方法的集合。且默认的 getter 属性也要重新定义。
不定义会如何？
如果不重新定义，则 Vue 对象会由于 Getter 属性的缺失而无法渲染：
<!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 crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg==" src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script> </head> <body> <div id="app2"> {{ infoc }} </div> <script> var app2 = new Vue({ el: "#app2", data: { msg1: "hello", msg2: "phyger", info: "hello phyger" }, watch:{ msg1: function(){ this.info = this.msg1 + ' ' + this.msg2 }, msg2: function(){ this.info = this.msg1 + ' ' + this.msg2 } }, computed: { infoc:{ // get: function(){ // return this.msg1+' '+this.msg2 // }, set: function(newValue){ var temInfo = newValue.split(' ') this.msg1=temInfo[0] this.msg2=temInfo[temInfo.length-1] } } } }) </script> </body> </html> 复制代码
网络异常，图片无法展示
|
将 get 属性的注释去掉
网络异常，图片无法展示
|
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
