Vue.js第六课 计算属性
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 1
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
尝试一下 »
实例 1 中模板变的很复杂起来,也不容易看懂理解。
接下来我们看看使用了计算属性的实例:
实例 2
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')
}
}
})
</script>
尝试一下 »
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
实例 3
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
}
}
尝试一下 »
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
实例 4
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {// getterget: function () {return this.name + ' ' + this.url},// setterset: function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}
}
}
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);
Vue.js第六课 计算属性相关推荐
- 08.vue.js实战笔记(计算属性、v-bind及class和style的绑定、内置指令、方法与事件)
1.计算属性 所有的计算属性都以函数的形式写在vue实例的computed选项内,最终返回计算后的结果 <!DOCTYPE html> <html lang="en&quo ...
- vue源码-对于「计算属性」的理解
vue源码-对于「计算属性」的理解 这是我最近学习vue源码的一个个人总结和理解,所以可能并不适合每一位读者 本文的整体脉络如下,首先尽可能去掉细节,对计算属性源码的大致实现有一个了解,然后举一例子, ...
- Vue语法学习第三课——计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...
- vue.js 第四课
(1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue — 第三天(计算属性和json-server)
计算属性 使用场景 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 例如:要对给定的字符串做翻转处理之后再来显示. <div id ...
- vue修改计算属性的值_「Vue学习记录五」计算属性和侦听器
1: 计算属性: (内置缓存机制) 当更改age的时候, fullName 函数不执行: 当更改fristName的时候, fullName 函数才执行 <div id = "app& ...
- Vue第一部分(5):计算属性和过滤器
计算属性 在插值表达式中可以直接使用js表达式,这是非常方便的.但是如果表达式的内容很复杂,就会影响代码可读性,而且后期维护起来也不方便,例如下面的场景:需要统计多个商品的总价. 代码如下: < ...
- vue使用,及指令介绍,计算属性/过滤器
目录 Vue是什么 vue的单页面原理 Vue的使用 指令介绍: v-if和 v-show的区别 v-on 事件绑定: v-bind 绑定属性 处理数组绑定 v-model双向数据绑定 created ...
最新文章
- 遍历列表python_python列表的遍历与循环
- 监听iPhone的通话状态之---CoreTelephony.framework
- eclipse常用功能:代码重构(变量批量重命名)、自定义注释、代码模板、打开断言
- HDU1425 A Chess Game
- hadoop-hdfs-ha配置-搭建
- 用Python制作一个随机抽奖小工具
- java:linux上找出最耗资源的线程方法
- 如何更改itunes备份位置_Mac怎么修改iTunes的备份路径 如何在 Mac 中修改iTunes的备份路径...
- Python:实现simpson rule辛普森法则算法(附完整源码)
- Hive 异常,长期更新帖
- C#中将图片的背景去除
- 漫画程序猿惯用口头禅
- 理想中2.5D的网络拓扑图
- python Flask web 框架 (十七)
- 人工神经网络结构图高清,人工神经网络结构图解
- PID:智能小车入门(位置式和增量式)
- 一个关于概率的问题的思考
- 怎样实现MindMapper中主题的自由移动
- 10天,几万字,源码深度解析之 Spring IOC
- Linux比windows更适合工作和娱乐