<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- computed：对于比较长的计算和代码，放入computed方法中，直接{{函数名}}调用 同时监听数据变化作用-->
<div id="app">
{{reverseMsg}}
<h3>{{fullName}}</h3>
<button @click="handleClick">改变</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello',
firstName:'walter',
lastName:'lizzy'
},
methods:{
handleClick:function () {
this.msg = '计算属性computed'
}
},
computed:{
//computed默认只有getter方法
//计算属性最大的有点：产生缓存，如果数据没有发生变化 直接从缓存取
reverseMsg:function () {
//数据反转
return this.msg.split('').reverse().join('')
},
fullName:function () {
return this.firstName +' '+ 'love'+ ' ' + this.lastName
}
}
})
</script>
</body>
</html>