Vue.js学习笔记 第六篇 内置属性
computed属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-1">
<p>初始字符串：{{ content }}</p>
<p>计算后字符串：{{ reversedContent }}</p>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
content: 'TanSea'
},
computed: {
reversedContent: function() {
return this.content.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
Vue对象实例化时，之前接触过了el、data、methods，这里再介绍一个computed
computed的定义和methods的定义是一样的，但是在理解上可以理解为methods是类的方法，computed是类的属性
但是，computed默认是没有set方法的，我们可以显式的给他定义一个
<div id="app-2">
<p>初始字符串：{{ content }}</p>
<p>计算后字符串：{{ reversedContent }}</p>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#app-2',
data: {
content: 'TanSea'
},
computed: {
reversedContent: {
get: function() {
return this.content.split('').reverse().join('')
},
set: function(newValue) {
this.content = newValue
}
}
}
})
</script>
这时，我们就可以在浏览器的控制台输入vm2.reversedContent = 'Hello, World'给他重新赋值了
在大部分情况下，computed和methods是可以互换的，那么他们的区别是什么？
computed 属性会基于它所依赖的数据进行缓存，只有在依赖的数据发生变化时，才会重新取值
methods总是再次执行函数
<div id="app-3">
<p>初始字符串：{{ nowDate }}</p>
<p>methods：{{ mNowDate() }}</p>
<!-- Date.now()是非响应式的依赖数据，computed属性永远不会更新 -->
<p>computed：{{ cNowDate }}</p>
</div>
<script type="text/javascript">
var vm3 = new Vue({
el: '#app-3',
data: {
nowDate: Date.now()
},
methods: {
mNowDate: function() {
return Date.now()
}
},
computed: {
cNowDate: function() {
return Date.now()
}
}
})
</script>
例子使用了Date.now()这种非响应式数据，computed在首次计算完成之后就不再更新
Vue.js学习笔记 第六篇 内置属性的更多相关文章
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js学习笔记 第四篇 列表渲染
遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...
- Vue.js学习笔记 第五篇 事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- Vue.js学习笔记 第三篇 条件渲染
条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
随机推荐
- 在看lua仿单继承
--lua仿单继承 Account = { balance = } --对于成员变量,第一此访问要使用元表中的,在第一次也赋值到自己的域中了 --将不涉及到__index了 function Acco ...
- boost::lockfree::spsc_queue
#include <boost/thread/thread.hpp> #include <boost/lockfree/spsc_queue.hpp> #include < ...
- 【BZOJ4199】[Noi2015]品酒大会 后缀数组+并查集
[BZOJ4199][Noi2015]品酒大会 题面:http://www.lydsy.com/JudgeOnline/wttl/thread.php?tid=2144 题解:听说能用SAM?SA默默 ...
- Instapaper 使用经验和技巧
Instapaper 分类本质是文件夹整理,没有标签. 文件夹意味着一篇文章只能放在一个文件夹里,不像标签可以实现一篇文章多个标签的功能. 一.文件夹和Like功能 1.已有文件夹: Home:存放所 ...
- coursera 《现代操作系统》 -- 第十一周 IO系统
本周要求 错题 下列I/O控制方式中,哪一个不需要硬件支持? 中断方式 轮询方式 DMA方式 I/O处理机方式 中断方式:中断控制器 轮询方式:CPU不断查询设备以了解其是否就绪 DMA:使用到了 ...
- box-shadow阴影效果
.shadowBox{ -moz-box-shadow:5px 5px 5px #A9A9A9; -webkit-box-shadow:5px 5px 5px #A9A9A9; box-shadow: ...
- Qt 如何像 VS 一样创建项目模版？
qt 存储模版路径位置:Qt\Qt5.9.5\Tools\QtCreator\share\qtcreator\templates\wizards 在里面随意复制一个模版,修改三项即可在 qt 中显示该 ...
- 解决john不能开多个进程的问题
在使用john进行shadow文件破解时,如果已经开了一个john的进程,这回提示以下错误: Crash recovery file is locked: /root/.john/john.rec ...
- 如何在有input（） 语句下断点调试（内附高清无码福利）
困扰了半天,一直没找到如何在含有输入语句的情况下用pycharm进行断点调试(调试的同时进行输入交互), But 经过尝试,还是找到了~~~ 通过debug可以快速的找到报错信息,以及观察程序每步的运 ...
- Json模块的详细介绍(序列化)
什么叫序列化——将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 比如,我们在python代码中计算的一个数据需要给另外一段程序使用,那我们怎么给? 现在我们能想到的方法就是存在文件里,然 ...