vue中关于computed的一点理解
computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同事会出发实时计算。
例子：
<body id="content">
<parent :childrens="childrens"></parent>
</body>
<!-- 这个测试主要想证明： 对于计算属性里如果关联对象，即使对象不是组件作用域内的，当对象在外部改变了某个属性，同样会出发计算属性的方法-->
<script>
var parent = Vue.extend( {
props: {
childrens: ''
},
template: '<div >{{age}}</div>',
data: function() {
return {
name: '',
age: 18
};
},
computed: {
age: function() {
return this.childrens.age +10;
}
},
created: function() {
var _parent = this.$parent;
this._set = {};
this._set = _parent;
}
} );
var vm = new Vue( {
el: 'body',
data: {
childrens: {
name: '小强',
age: 20,
sex: '男'
}
},
components: {
'parent': parent
}
} );
vm.$data.childrens.age = 50;
</script>
当vm.$data.childrens.age这个值改变的时候，动态触发computed里的age属性计算，最后显示到页面的结果是：60。
vue中关于computed的一点理解的更多相关文章
- vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- Vue 中的 computed 和 methods
Vue 中的 computed 和 methods 使用 computed 性能会更好. 如果你不希望缓存,可以使用 methods 属性.
- vue中methods,computed，filters,watch的总结
08.28自我总结 vue中methods,computed,filters,watch的总结 一.methods methods属性里面的方法会在数据发生变化的时候你,只要引用了此里面分方法,方法就 ...
- 浅尝 Vue 中的 computed 属性 与 watch
对于 computed 的理解: ①.computed 用来监控自己定义的变量,该变量不在 data 里面声明,直接在 computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其 ...
- Vue中的computed属性
阅读Vue官网的过程中,对于计算属于与监听器章节的内容有点理解的不清晰:https://cn.vuejs.org/v2/guide/computed.html. 后来上网查询了资料,结合官网的说明,总 ...
- 八、Vue中的computed属性
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
- 十三、Vue中的computed属性
以下抄自https://www.cnblogs.com/gunelark/p/8492468.html 看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲 ...
- Vue中的computed和watch
看了网上很多资料,对vue的computed讲解自己看的都不是很清晰,今天忙里抽闲,和同事们又闲聊起来,对computed这个属性才有了一个稍微比较清晰的认识,下面的文章有一部分是转自: https: ...
随机推荐
- C#中的一些复习。
摘自http://www.cnblogs.com/yuchengping/p/3151537.html 等日后自己来完善. 基本概念 1..NET是平台,C#是.NET上的一门语言. 2.C#的异常处 ...
- ewebeditor下利用ckplayer增加html5 （mp4）全平台的支持
学校数字化平台富文本编辑器一直用的ewebeditor,应该说非常的好,支持常用office文档的直接导入,极大的方便了老师们资料的上传,最近在规划整个数字化校园向全平台改版,框架采用bootstra ...
- HTML5 prefetch即预加载
原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 ...
- linux oracle 设置随系统自动启动数据库实例和监听
在root账户下修改/etc/oratab 文件: # vi /etc/oratab 找到orcl=/db/app/oracle/product/11.1.0/db_1 :N这一行 改为: orcl= ...
- PowerDesigner使用常见问题
1.在数据库生成表的时候,要求PowerDesigner中设计的表的Name的值要放到数据库中表的描述中,而不是PowerDesigner 中字段的Comment: 具体方法如下:首先将PowerDe ...
- C# ITextSharp pdf 自动打印
PDF生成后直接进入打印预览不用下载 using iTextSharp.text; using iTextSharp.text.pdf; Document pdfDoc = new Document( ...
- 【笔记】shell下的主要工具
shell 下有很多工具是非常好的辅助. 一.自我精进的途径 1.help / --help :简要的帮助说明: help 是针对 shell 内建功能的帮助, gnu工具一般为 "程序名 ...
- LCD的背光及觸摸屏
液晶的发现可追溯到19 世纪末,1888 年被奥地利植物学家发现.它是一种在一定温度范围内呈现既不同于固态.液态,又不同于气态的特殊物质态.既具有晶体所具有的各向异性造成的双折射性,又具有液体所特有的 ...
- C#语言之“中英文混合字符串对齐”的方法【转】
参考自:(1)http://www.cnblogs.com/cnluoke/articles/1213398.html (2)http://www.cnblogs.com/sql4me/archive ...
- uva 10718 Bit Mask （位运算）
uva 10718 Bit Mask (位运算) Problem A Bit Mask Time Limit 1 Second In bit-wise expression, mask is a ...