最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vue.js学习之计算属性
时间：2017-03-01 编辑：简简单单 来源：一聚教程网
计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
开始用vue会把所有的模版上的数据都放到data属性里，或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了，后来看到同组的同事在用computed属性，就又去查了一下api，发现这种情况其实最好用的就是computed。
1. computed可以保持模版的清晰，在template里尽量只进行展示和绑定，而不要加入逻辑操作。
2. 用computed的还有一个好处就是会跟随其他data属性的变化自动变化
比如官方文档的一个例子：
| 代码如下 | 复制代码 |
varvm =newVue({ 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就会产生代码的冗余，比如在直播中状态的变化就可以用来计算是否展示视频之类的上层属性
| 代码如下 | 复制代码 |
varvm =newVue({ el:'#demo', data: { firstName:'Foo', lastName:'Bar' }, computed: { fullName:function() { returnthis.firstName +' '+this.lastName } } }) | |
-
上一个： ionic中列表项增加和删除的实现方法
-
下一个： NodeJS遍历文件生产文件列表功能示例
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28