怎么用frontpage做网站/推广赚钱平台
我们显示英文中的名与姓
本篇demo的以 dell 与 lee
在data 中声明了firstname与lastname，但是在差值表达式中不希望有过多的逻辑。所以应用到了计算属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性，方法和监听器</title><script src="vue.js"></script>
</head>
<body>
<div id="app"><div>{{firstName +" "+ lastName}}</div><div>{{fullName}}</div>
</div>
<script>var vm =new Vue({el:"#app",data:{firstName:'Dell',lastName:"Lee ",// fullName:"Dell Lee"},//计算属性computed:{fullName: function () {return this.firstName+" "+this.lastName}}})
</script>
</body>
</html>计算属性有个特点，内置缓存
机制：fullname依赖了firstname 与 lastname
当这两个属性如果一直没有进行变化，那么fullname也一直不会变化，会一直使用上一次进行计算的结果，这样会提高性能
使用methods方法也可以得到同样的结果，
但是却没有计算属性更有效一些，因为methods没有缓存机制，只要重新渲染整个页面，那么就会再一次调用这个方法
下面一种利用watch侦听器的方法来实现
同样也是一个函数
也相当于一个缓存，类似于computed
当你依赖的两个变量不进行改变的时候，fullname的结果相当于不变，而且watch中的firstname与lastname函数不会被调用的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性，方法和监听器</title><script src="vue.js"></script>
</head>
<body>
<div id="app"><div>{{firstName +" "+ lastName}}</div><div>{{fullName}}</div>
</div>
<script>var vm =new Vue({el:"#app",data:{firstName:'Dell',lastName:"Lee ",fullName:"Dell Lee"},//计算属性// 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>
</body>
</html>