VUE学习之计算属性computed
计算属性:computed
先看一下官网的说法
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
所以,对于任何复杂逻辑,你都应当使用计算属性。
computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品金额和总金额之间的关系,只要商品列表里面的选中商品金额发生变化,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
栗子:
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
结果:
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage
。我们提供的函数将用作属性 vm.reversedMessage
的 getter 函数:
console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'
你可以打开浏览器的控制台,自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。
总结: 计算属性适合不断变化的值,例如购物车中的商品总金额,当有复杂逻辑的时候将功能写在computd中是更好地选择
最新文章
- 20个最新的照片 PS 技巧,提升摄影水平
- NYOJ题目769乘数密码
- Search Insert Position [LeetCode]
- auto,register,static分析
- dp和px以及sp
- Activity界面切换动画特效。
- erp中三大订单CO、PO、MO各是代表什么?
- error LNK2005: DDX_Control 已经在 uafxcwd.lib(wincore2.obj) 中定义
- 重构if...else...或者switch程序块 为 中介者(Mediator)模式.的思考
- js 中用Dom2级事件处理函数(改变样式)
- Android应用开发-小巫CSDN博客client之嵌入有米广告
- javaweb分页思想
- [科普]MinGW vs MinGW-W64及其它
- Permanent Generation Removal Overview(译文)
- 基本元件库(Basic)
- 【Unity3D与23种设计模式】游戏的主循环——Game Loop
- Leetcode 10. 正则表达式匹配 - 题解
- pycharm汉化补丁
- Zuul网关总结
- MyBatis:GeneratorConfig生成mapper以及pojo