计算方法/侦听器/属性

最新推荐文章于 2023-05-18 19:52:31 发布

原创最新推荐文章于 2023-05-18 19:52:31 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

vue.js框架专栏收录该内容

13 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算方法属性侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>

<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:28
},
//监听器（有缓存）
watch:{
firstName:function () {
console.log("computed once");
this.fullName = this.firstName + " " + this.lastName;
},
lastName:function () {
console.log("computed once");
this.fullName = this.firstName + " " + this.lastName;
}

}
//方法(无缓存)
/*methods:{
fullName : function () {
console.log("computed once");
return this.firstName + " " + this.lastName
}
}*/
//计算属性(有缓存)推荐
/*computed:{
fullName:function () {
console.log("computed once");
return this.firstName + " " + this.lastName
}
}*/
})
</script>

</body>
</html>