前言
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
开始用vue会把所有的模版上的数据都放到data属性里，或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了，后来看到同组的同事在用computed属性，就又去查了一下api，发现这种情况其实最好用的就是computed。
1. computed可以保持模版的清晰，在template里尽量只进行展示和绑定，而不要加入逻辑操作。
2. 用computed的还有一个好处就是会跟随其他data属性的变化自动变化
立即学习“前端免费学习笔记（深入）”；
比如官方文档的一个例子：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})
建站之星(sitestar)网站建设系统体验包2.3
下载
建站之星网站建设系统是一种全新的互联网应用模式，它一改过去传统的企业建站方式，不需企业编写任何程序或网页，无需学习任何相关语言，也不需第三方代写或管理网站，只需应用系统所提供的各种强大丰富的功能模块，即可轻松生成企业个性化的精美网站。 SiteStar v2.3本地软件体验包说明：为方便客户能够第一时间体验智能建站软件的强大功能，我们特别提供了本地软件体验包，您只需下载下来并安装在您的计算机上（和
如果用watch就会产生代码的冗余，比如在直播中状态的变化就可以用来计算是否展示视频之类的上层属性
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
总结
以上就是关于Vue.js的计算属性的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
更多Vue.js学习之计算属性相关文章请关注PHP中文网！
