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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
javascript 树控件 比较好用
Jun 11 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
深究AngularJS中$sce的使用
Jun 12 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 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
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
学习jQuey中的return false
2015/12/18 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
python生成随机mac地址的方法
2015/03/16 Python
使用python为mysql实现restful接口
2018/01/05 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
办公室文员工作自我评价
2013/12/01 职场文书
大学生实习思想汇报
2014/01/12 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
校园活动宣传方案
2014/03/28 职场文书
保护水资源的标语
2014/06/17 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
结婚老公保证书
2015/02/26 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL