计算属性还有两个很实用的小技巧容易被忽略: 一是计算属性可以依赖其他计算属性;二是计算属性不仅可以依赖当前Vue实例的数据,还可以依据其他实例的数据.
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
<div id="app1">
</div>
<div id="app2">
{{ reversedText }}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app1 = new Vue({
el: '#app1',
data: {
text: '123,456'
},
});
var app2 = new Vue({
el: '#app2',
computed: {
reversedText: function () {
// 这里依赖的是一个实例app1的数据text
return app1.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
</html>
这里我们创建了两个Vue实例app1和app2,在app2的计算属性reversedText中,依赖的是app1的数据text,所以当text变化时,实例app2的计算属性也会变化.
网友评论