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 = 10;
</script>
当vm.$data.childrens.age这个值改变的时候，动态触发computed里的age属性计算，最后显示到页面的结果是：20。
Vue中的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系列---理解Vue中的computed,watch,methods的区别及源码实现(六)
_ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...
- 浅尝 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: ...
随机推荐
- 【思维题 kmp 构造】bzoj4974: [Lydsy1708月赛]字符串大师
字符串思博题这一块还是有点薄弱啊. Description 一个串T是S的循环节,当且仅当存在正整数k,使得S是T^k(即T重复k次)的前缀,比如abcd是abcdabcdab的循环节 .给定一个长度 ...
- 【交互 细节题 思维题】cf1064E. Dwarves, Hats and Extrasensory Abilities
第一次做交互真有趣……:挺好的细节思维题 This is an interactive problem. In good old times dwarves tried to develop extr ...
- Pycharm安装类库
比如安装requests 打开settings,选择Project 下面的Project Interpreter,点击pip,在弹出窗口里输入requests然后点击install 即可!
- shell-code-拷贝文件
#!/bin/bash while read F do cp ${F}"_pe_1.fastq.gz" /public/home/chenjy/usr/ZD/data/cleand ...
- redis--py链接redis【转】
请给原作者点赞--> 原文链接 一.redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链 ...
- 利用virt-manager，xmanager, xshell启动界面来管理虚拟机
有时候我们需要搭建一套自己的简单环境来启动一个虚拟机,验证一些问题. 1.首先我利用vmware workstation来创建centos7虚拟机,然后开启虚拟化,如下图所示. 2.其次,启动虚拟机, ...
- 1507: [NOI2003]Editor（块状链表）
1507: [NOI2003]Editor Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 4157 Solved: 1677[Submit][Stat ...
- python基础学习笔记——异常处理
异常处理流程图 一,异常和错误 part1:程序中难免出现错误,而错误分成两种 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法 ...
- SVN 删除所有目录下的“.svn”文件夹，让文件夹脱离SVN控制
SVN 删除所有目录下的“.svn”文件夹,将如下语句拷备到记事本,并保存为 *.reg,双击导入注册表,在文件夹右键中就多了一条“Delete SVN Folders”,点击就可以删处此目录下的所有 ...
- JDK并发基础与部分源码解读
之前写的一个ppt 搬到博客来