//需求：把数字的顺序变成789，456，123
<div id = "#demo">
{{text}} <br>
{{text.split(',').reverse().join(',')}}<br>
</div>
var app = new Vue({
el:'#demo',
data:{
text:'123,456,789'
}
} )
先把字符串变成数组，用逗号分割text.split(',');变成[123,456,789] 然后数组的逆转顺序，用.reverse；变成了[789,456,123] 把数组变成字符串，用逗号分割.join(',') 变成了‘789，456，123’
计算属性案例2，购物车总价格
计算属性的第一个功能：
<body>
<div id ="demo">
两个购物车总计： {{prices}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script type="text/javascript">
var app2 = new Vue({
el:'#abc',
data:{
msg:'我是app2里面的内容'
}
})
var app1 = new Vue({
el:'#demo',
data:{
//第一个购物车
package1:[
{
name:'iPhone',
price:6999,
count:2
},
{
name:'ipad',
price:3600,
count:1
}
],
//第二个购物车
package2:[
{
name:'iphone',
price:6999,
count:3
},
{
name:'ipad',
price:3600,
count:6
}
]
},
//定义计算属性
computed:{
prices:function(){
var prices = 0;
for (var i = 0; i<this.package1.length;i++){
prices += this.package1[i].price*this.package1[i].count;
}
for (var j = 0; j<this.package2.length;j++){
prices += this.package2[j].price*this.package2[j].count;
}
return prices+'--------'+app2.msg;
}
}
})
</script>
</body>
计算属性的第二个功能：显示姓名示例：
<div id ="abc">
我的名字是------{{fullName}}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
var app2 = new Vue({
el:"#abc",
data:{
firstName:'zhang',
lastName:'sanfeng'
},
computed:{
//计算属性默认是getter函数
fullName:function(){
return this.firstName+' '+this.lastName
},
* set:function(newValue){
conlose.log('我是set方法。我被调用了')
var names = newValue.split(',');//分割为数组
this.firstName = names[0];
this.lastName = names[1];
}*
}
})
</script>
计算属性的缓存?????
共同之处： 调用methods里的方法也可以达到与计算属性有同样的作用 不同之处：
页面中的方法（methods）：调用方法时，只要页面得到渲染，方法就会重新执行；页面不需要渲染时，方法不重新执行。 计算属性（compured）：无论页面重新渲染与否，只要计算属性所依赖的数据没有变化，它都不变化。 结论： 不用计算属性，在 methods 里定义一个方法，也可以达到同样的效果，甚至该方法还可以接受参数，更灵活。那为什么还需要计算属性呢？原因是 计算属性是基于它的依赖缓存的，只要它所依赖的数据没有发生变，计算属性就不会重新跟新。
