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 相关文章推荐
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
精通JavaScript的this关键字
May 28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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文件缓存类用法实例分析
2015/04/22 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
原JS实现banner图的常用功能
2017/06/12 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
对python中if语句的真假判断实例详解
2019/02/18 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
某公司部分笔试题
2013/11/05 面试题
初中班级口号
2014/06/09 职场文书
演讲比赛策划方案
2014/06/11 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
本科应届生求职信
2014/08/05 职场文书
四风自我剖析材料
2014/09/30 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年售票员工作总结
2014/11/19 职场文书
社会实践活动总结格式
2015/05/11 职场文书
教师岗位说明书
2015/09/30 职场文书
详解python网络进程
2021/06/15 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL