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 问答知识整理
Feb 11 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
详解react组件通讯方式(多种)
May 06 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
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
js的event详解。
2006/09/06 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python分割文件的常用方法
2014/11/01 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python使用gRPC传输协议教程
2018/10/16 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
一份Java笔试题
2012/02/21 面试题
小学生成长感言
2014/01/30 职场文书
审计主管岗位职责
2014/01/31 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
高中生职业规划范文
2014/03/09 职场文书
继承公证书样本
2014/04/04 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
质量主管工作职责
2014/09/26 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
《秋思》教学反思
2016/02/23 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS