要点:
1.computed定义的属性,称为计算属性。本质是定义的方法,但是我们在使用时,直接当作属性使用,不用加()
2.每次计算属性使用的数据发生改变时,计算属性调用其处理方法
3.将计算属性的最新的值,放在缓存中。只有在计算属性的变量改变时,才会重新将缓存内容刷新。所以,别的方法调用计算函数结果时,如果没有触发变量的改变,不会调用对应的function
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname"> +
<input type="text" v-model="lastname"> =
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
firstname:'',
lastname:''
},
computed:{
'fullname':function () {
return this.firstname + '·' + this.lastname;
}
//1.computed定义的属性,称为计算属性。本质是定义的方法,但是我们在使用时,直接当作属性使用,不用加()
//2.每次计算属性使用的数据发生改变时,计算属性调用其处理方法
//3.将计算属性的最新的值,放在缓存中。只有在计算属性的变量改变时,才会重新将缓存内容刷新。所以,别的方法调用计算函数结果时,
//如果没有触发变量的改变,不会调用对应的function
}
})
</script>
</body>
</html>
效果: