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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
jQuery中extend函数详解
Jul 13 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
JS倒计时两种实现方式代码实例
Jul 27 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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脚本数据库功能详解(中)
2006/10/09 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
python进阶教程之动态类型详解
2014/08/30 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
护士个人简历自荐信
2013/10/18 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
早餐连锁店计划书
2014/01/08 职场文书
幼儿园家长评语
2014/02/10 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
企业员工集体活动方案
2014/08/17 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis