您的位置：首页 > 其它

计算属性（computed）

2017-03-02 09:20 337 查看

需求：数据

msg

值为

Hello

，我们现在需要反向显示成

olleH

。

方式1：模板中绑定表达式

<div id="box">
{{msg}}
<hr>
{{ msg.split('').reverse().join('') }}
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data:{
msg:'Hello'
},
});
</script>

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'Hello'
},
computed:{
reMsg:function(){
return this.msg.split('').reverse().join('')
}
}
});

console.log(vm.reMsg); //'olleH'
</script>
</body>
</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的实例，获取到该属性:

console.log(vm.reMsg); //'olleH'

1
1

但是

msg

和

resMsg

是有区别的：

可以通过实例对象修改

msg

：

console.log(vm.reMsg); //'olleH'
console.log(vm.msg = 'World'); //修改
console.log(vm.reMsg = 'reMsgxxooo '); //不能修改

1
2
3
1
2
3

计算setter

我们刚才已经知道，并没有成功修改

reMsg

这个计算属性，那是因为默认只有getter，不过需要的时候我们也可以提供一个setter:

<div id="box">
{{msg}}
<hr>
{{reMsg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
msg:'Hello'
},
computed:{
reMsg:{
get:function(){
return this.msg.split('').reverse().join('')
},
set:function(value){
this.msg = value; //最后修改了msg
}
}
}
});

console.log(vm.reMsg); //'olleH'
console.log(vm.msg = 'World'); //修改
console.log(vm.reMsg = 'reMsgxxooo'); //不能修改
</script>

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

。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航