vue.js入门教程之计算属性


Posted in Javascript onSeptember 01, 2016

前言

计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

模板中表达式非常便利,但是它们实际上只用于简单的操作。

模板是为了描述视图的结构,在模板中放入太多的逻辑会让模板过重且难以维护。

这就是为什么 Vue.js 将绑定表达式限制为一个表达式,

如果需要多于一个表达式的逻辑,应当使用计算属性。

来看这一个简单的例子

<div id="example">
 a={{ a }}, b={{ b }}
</div>

var vm = new Vue({ //之所以起名vm,是因为这其实是mvvm中的vm
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 // 一个计算属性的 getter
 b: function () {
  // `this` 指向 vm 实例
  return this.a + 1
 }
 }
})

输出结果:

a=1,b=2

这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。

console.log(vm.b) // -> 2
vm.a = 3
console.log(vm.b) // -> 3

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。

如果你想观察 Vue 实例上的数据变动,可以使用Vue.js 提供的一个方法 $watch

<div id="demo">{{fullName}}</div>

var vm = new Vue({
 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
})

不过上面的方法也可以使用computed实现:

var vm = new Vue({
 data: {
 firstName: 'Foo',
 lastName: 'Bar'
 },
 computed: {
 fullName: function () {
  return this.firstName + ' ' + this.lastName
 }
 }
})

这样写是不是更简单,没有多余的重复代码,官方也鼓励使用computed方法。

上面讲computed时,有提到该方法提供了默认的get方法,那么有没有set方法呢?

// ...
computed: {
 fullName: {
 // getter
 get: function () {
  return this.firstName + ' ' + this.lastName
 },
 // setter
 set: function (newValue) {
  var names = newValue.split(' ')
  this.firstName = names[0]
  this.lastName = names[names.length - 1]
 }
 }
}
// ...

如果我们调用 vm.fullName = 'John Doe'时,setter 就会被调用。vm.firstNamevm.lastName也会有相应更新。这个方法,在有些时候是很有用的。

总结

以上就是关于vue.js计算属性的全部内容,希望这篇文章对大家能有所帮助,小编还会陆续更新关于vue.js的内容,感兴趣的小伙伴们可以继续关注三水点靠木。

Javascript 相关文章推荐
jquery简单体验
Jan 10 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
canvas的神奇用法
Feb 03 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
JavaScript实现分页效果
Mar 28 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
AngularJs expression详解及简单示例
Sep 01 #Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 #Javascript
vue.js入门教程之基础语法小结
Sep 01 #Javascript
AngularJs directive详解及示例代码
Sep 01 #Javascript
AngularJs concepts详解及示例代码
Sep 01 #Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 #Javascript
AngularJs html compiler详解及示例代码
Sep 01 #Javascript
You might like
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP实现简易图形计算器
2020/08/28 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python安装本地whl的实例步骤
2019/10/12 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
经典c++面试题二
2015/08/14 面试题
易程科技软件测试笔试
2013/03/24 面试题
医院节能减排方案
2014/06/13 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
呼兰河传读书笔记
2015/06/30 职场文书