computed属性
2018-08-03 本文已影响0人
椰果粒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
// 生命周期函数就是 Vue实例在某一个时间点自动执行的函数
var vm = new Vue({
el : "#app",
data : {
firstName : 'jingwen',
lastName : "fu" },
computed : {
// 这里的计算结果fullName，不需要写在data中，直接渲染在页面上即可。
// 计算属性 有缓存
// 缓存机制：当依赖的数据没有发生变化时，就会缓存下来，不会重新计算，只有依赖的数据变化以后才会重新计算
// 优点：提高性能
// 计算属性直接写属性名字即可
// 如果是methods的话，就会每一次都重新计算
fullName : function(){
console.log("计算了一次");
return this.lastName + " " + this.firstName
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
firstName : 'jingwen',
lastName : "fu" },
computed : {
fullName : {
// 获取值
get : function(){
return this.firstName + ' ' + this.lastName
},
// 当数据变化时，value是你自己改变的那个值
set : function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</html>
image.png
