Vue.js（2.x）之计算属性
昨天看完大神的文章后，深感惭愧，硬着头皮继续看官网文档，然而这真的没是没办法，介绍的实在有些敷衍：
1）、计算属性:也不说下computed是计算属性关键词，vm实例是可以像代理data一样代理computed的，可以直接把其属性当文本插值放到HTML标签中。
2）、这里的getter是什么意思？
console.log()又是干嘛用的？
vm.reversedMessage的值取决于vm.message，那反过来成立吗？
- 查了半天资料，知乎上面的解释全一点：getter 和 setter 方法有什么意义？看了半天，总得自己总结下吧：getter就是用来获取data的属性值，并可以作修改后输出（结合上方例子），但并不会影响data的属性值。
- console.log()是在浏览器控制台里打印查看信息使用的函数（基础不牢啊），有网友介绍的很详细：http://blog.csdn.net/bcbobo21cn/article/details/51810601
- 反过来不成立，vm.reversedMessage的值取决于vm.message，但vm.reversedMessage的值单独修改也无效，使用console.log()查看信息截图如下：
可以清楚地看到更改vm.reversedMessage的值后，vm.message的值并没有更改，再打印它本身，也同样没有修改。
不明白的地方是为何下方会出现undefined？
3）、简单理解getter，就是会返回值（获取值），setter就是设置属性值。可官网上给的例子与线下测试的并不一样：
代码如下图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.static {
background: #444;
color: #eee;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="demo">{{ fullName }}</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
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];
}
}
}
})
</script>
</body>
</html>
等到后面睁大眼睛后发现data里也设置了fullName，注释掉data里设置的fullName后，再运行并打印vm.firstName与vm.lastName，它们的值的确改变了，如右图所示：
由此偶这么猜想：当data里的属性名与计算属性computed里的属性名相同时，以data里的属性名为主，computed里的无效。
copy小结：
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
Vue.js（2.x）之计算属性的更多相关文章
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- Vue.js的类Class 与属性 Style如何绑定
Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- 007——VUE中非常使用的计算属性computed实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue基础第三章 - 计算属性
1.计算属性介绍 在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算,但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护,比如第二章的示例{{ text.split(',') ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- vue 生命周期钩子 过滤器 计算属性
每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...
- vue文档阅读笔记——计算属性和侦听器
页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点 计算属性用于 替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器 ...
随机推荐
- css中的定位属性position（转）
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定
1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...
- 实现hadoop中的机架感知
hadoop中声明是有机架感知的功能,能够提高hadoop的性能.平时我们使用的hadoop集群,实际上是从来没有使用上这个功能的. hadoop中所说的 机架感知的实现实际上这样的: hadoop启 ...
- R语言中的字符处理
R语言中的字符处理 (2011-07-10 22:29:48) 转载▼ 标签: r语言 字符处理 字符串 连接 分割 分类: R R的字符串处理能力还是很强大的,具体有base包的几个函数和strin ...
- p1640&bzoj1854 连续攻击游戏（游戏）
传送门(洛谷) 传送门(bzoj) 题目 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用 ...
- byte和int转换
byte b1=1,b2=2,b3,b6; final byte b4=4,b5=6; b6=b4+b5; b3=(b1+b2); System.out.println(b3+b6); b3=b1+b ...
- linq分页扩展
直接上代码了 public static List<T> ToPagedList<T>(this IEnumerable<T> allItems, int page ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- PTA 1045【DP】
思路: DP[ i ] 代表以值 i 结尾的当前最长长度. 每次枚举序列数组,dp[ i ] = max( dp[ i ] ,dp[ a[j] ] + 1); #include <bits/st ...
- linux的防火墙端口配置
健忘啊,记下来吧 Red Hat Linux系统 此类型系统包括red hat的各类衍生及相关不版本,包括RHEL.CentOS.Fedora等等. 防火墙配置文件: /etc/sysconfig/i ...