Vue.js学习之计算属性


Posted in Javascript onJanuary 22, 2017

前言

计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,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的计算属性的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
You might like
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
非常实用的php验证码类
2016/05/15 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
js更优雅的兼容
2010/08/12 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python用requests实现http请求代码实例
2019/10/31 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
人事局接收函
2015/01/31 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS