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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
常用jQuery选择器总结
Jul 11 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
vue设置默认首页的操作
Aug 12 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用mysql数据库存储session的代码
2010/03/05 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
学习ExtJS form布局
2009/10/08 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Vue数据绑定简析小结
2019/05/07 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python私有属性和方法实例分析
2015/01/15 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python、Matlab求定积分的实现
2019/11/20 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Django中ORM的基本使用教程
2020/12/22 Python
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
行政助理的岗位职责
2014/02/18 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python基础之元类详解
2021/04/29 Python
redis中lua脚本使用教程
2021/11/01 Redis
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL