需求:数据msg
值为Hello
,我们现在需要反向显示成olleH
。
方式1:模板中绑定表达式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
方式2:利用Vue的computed
文档:http://cn.vuejs.org/v2/guide/computed.html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
同样可以通过Vue的实例,获取到该属性:
- 1
- 1
但是msg
和resMsg
是有区别的:
可以通过实例对象修改msg
:
- 1
- 2
- 3
- 1
- 2
- 3
计算setter
我们刚才已经知道,并没有成功修改reMsg
这个计算属性,那是因为默认只有getter,不过需要的时候我们也可以提供一个setter:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
因为写了setter,这样vm.reMsg = 'reMsgxxooo'
就会调用reMsg
的set函数,最终修改msg
。