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实现计算两个日期的间隔天数
Aug 14 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
最短的IE判断代码
Mar 13 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 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脚本的10个技巧(2)
2006/10/09 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Js组件的一些写法
2010/09/10 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python简单实现获取当前时间
2016/08/27 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python dict 相同key 合并value的实例
2019/01/21 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
英语系本科生个人求职信
2013/09/21 职场文书
护士自荐信范文
2013/12/15 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
服务整改报告
2014/11/06 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
教师研修随笔感言
2015/11/18 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电