王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
<!--
方法
属性
监听器
-->
<!-- 案例:打印出fullName -->
<html>
<title></title>
<body>
<div id="app">
<!-- 计算属性 -->
<!-- {{fullName}} -->
<!-- 方法 -->
<!-- {{fullName()}} -->
{{fullName}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
fullName:"Dell Lee"
},
methods:{
// 方法
// fullName:function(){
// return this.firstName+ " "+this.lastName
// }
},
//计算属性:有缓存机制,只要依赖的没有改变,则使用缓存数据
// computed:{
// fullName:function(){
// return this.firstName+ " "+this.lastName
// }
// }
//监听器,具有缓存
watch:{
firstName:function(){
this.fullName = this.firstName+" "+this.lastName;
},
lastName:function(){
this.fullName = this.firstName+" "+this.lastName;
}
}
})
</script>
</html>
