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中rules的写法使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了如何实现vue的tree组件，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下2020-12-12
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?这篇文章主要介绍了vue-cli3.0 环境变量与模式 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了VUE里如何修改element-ui的显示层次与上下间隔问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
今天小编就为大家分享一篇使用electron将vue-cli项目打包成exe的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vuex 使用及简单实例(计数器)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要给大家介绍了关于vue中v-model失效原因以及解决方案的相关资料,vue的v-model是一个双向绑定的数据流,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga，下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容，具有一定的参考价值，需要的小伙伴可恶意参考一下2021-12-12
Axios是一个基于Promise的HTTP客户端,可以在浏览器和Node.js中用于发送HTTP请求,本文主要介绍在Vue3中实现发送网络请求功能,感兴趣的朋友一起看看吧2023-12-12
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
这篇文章主要介绍了详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论