1、什么是计算属性
计算属性是vue特带的computed,可以进行运算和函数的调用
2、如何使用
1、可以依赖多个vue实例
2、可以依赖其他vue实例
ps:可以直接复制代码运行
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例9计算属性的用法</title>
</head>
<body>
<div id="app1">
<br> 使用自己的vue计算属性:{{test2}}
</div>
<div id="app2">
其他vue数据使用计算属性:{{reversedText}}
<br>未使用计算属性:{{app1.text.split(',').reverse().join(',')}}
<br>使用多个vue数据计算属性:{{reversedTexts}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app1 = new Vue({
el: '#app1',
data: {
text: '123,456'
},
computed: {
test2: function() {
return this.text.split(',').reverse().join(',') //依赖自己这个vue的实例
}
}
})
var app2 = new Vue({
el: '#app2',
data: {
text: '987,456',
addMore: ''
},
computed: {
reversedText: function() {
return app1.text.split(',').reverse().join(',') //依赖其他vue实例
},
//计算属性还可以依赖多个Vue 实例的数据
reversedTexts: function() {
this.addMore += app1.text.split(',').reverse().join(',');
this.addMore += this.text.split(',').reverse().join(',')
return this.addMore;
}
}
})
</script>
</body>
</html>
运行结果如下