这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
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 的计算属性的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
来源: http://www.phperz.com/article/17/0507/328224.html