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为搜索栏增加tag提示
Jun 22 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
Javascript confirm多种使用方法解析
Sep 25 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+DBM的同学录程序(4)
2006/10/09 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
php命令行模式代码实例详解
2021/02/26 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Vue数据驱动模拟实现1
2017/01/11 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
JS如何生成动态列表
2020/09/22 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
美的官方商城:Midea
2016/09/14 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
个人委托书范本
2014/04/02 职场文书
班级团队活动方案
2014/08/14 职场文书
护士工作心得体会
2016/01/25 职场文书