计算属性-----computed
在 computed 中可以定义一些属性,这些属性叫做 【计算属性】,计算属性的本质是一个方法, 只不过,我们在使用这些计算属性的时候,只把它们的名称,直接当作属性来使用;并不会把计算属性当作方法去调用.
注意:
- 计算属性,在引用的时候,一定不要加 () 去调用,直接把它当作普通属性使用就好了
- 只要计算属性的 function 内部,所用到的任何 data 中的数据发生了改变,那么这个计算属性的值也随之改变
- 计算属性的求值结果,会被缓存起来,方便下次直接使用;如果,计算属性方法中,所依赖的数据都未发生变化,则不会对计算属性求值
简单代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>名称案例-使用computed实现</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">
<p>{{ fullname }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: "",
lastname: ""
},
computed: {
"fullname": function() {
console.log("ok");
return this.firstname + "-" + this.lastname;
}
},
methods: {
}
});
</script>
</body>
</html>