Vue.js学习之计算属性
更新时间：2017年01月22日 11:26:51 作者：苏打草莓
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。下面这篇文章主要给大家介绍了Vue.js中的计算属性,需要的朋友可以参考借鉴，一起来看看吧。
前言
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，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
})
如果用watch就会产生代码的冗余，比如在直播中状态的变化就可以用来计算是否展示视频之类的上层属性
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
总结
以上就是关于Vue.js的计算属性的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
本文主要介绍了Vue打包后页面出现空白解决办法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
这篇文章将给大家详细介绍了vue3如何通过canvas实现图片圈选功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴快来跟随小编一起学习一下吧2023-12-12
这篇文章主要介绍了vue使用file-saver本地文件导出,大家需要安装xlsx和file-saver，然后创建localExports.js文件，具体实现代码跟随小编一起看看吧2022-01-01
这篇文章主要介绍了vue如何判断数组中的对象是否包含某个值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue实现导出excel表格的功能，在文章末尾给大家提到了vue中excel表格的导入和导出代码,需要的朋友可以参考下2018-03-03
下面小编就为大家带来一篇解决Vue编译时写在style中的路径问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了Vue.directive自定义指令的使用详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
Vue $attrs & inheritAttr实现button禁用效果案例
这篇文章主要介绍了Vue $attrs & inheritAttr实现button禁用效果案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论