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 相关文章推荐
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 Javascript
用javascript制作qq注册动态页面
Apr 14 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/12/27 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python opencv进行图像拼接
2020/03/27 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
详解redis分布式锁的这些坑
2021/05/19 Redis