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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JS画5角星方法介绍
Sep 17 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
vue跨域解决方法
Oct 15 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
js实现简单放大镜效果
Mar 07 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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程序员应具有的7种能力小结
2014/11/27 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
Symfony控制层深入详解
2016/03/17 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
如何实现JS函数的重载
2006/09/22 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python 加密的实例详解
2017/10/09 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
python3 kubernetes api的使用示例
2021/01/12 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
十佳护士获奖感言
2014/02/18 职场文书
医院信息公开实施方案
2014/05/09 职场文书
大学生简短的自我评价
2014/09/12 职场文书
公司奖励通知
2015/04/21 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL