Vue基础第三章 - 计算属性
1、计算属性介绍
在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算，但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护，比如第二章的示例{{ text.split(',').reverse().join(',') }}，为了使{{}}的内容看起来更简洁，就需要用到Vue中计算属性，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ reversedText }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
text:'123,456'
},
<!--计算属性在Vue的computed属性中以函数的形式定义-->
computed:{
reversedText:function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
</html>
2、计算属性用法
2.1、计算属性的常用用法
计算属性通常被用于完成各种复杂逻辑，包括运算和函数调用等，计算属性可以依赖多个Vue实例数据，任意一个数据变化都会使计算属性重新执行，页面也会随之更新，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
总价：{{ prices }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
package1:[
{
name:'iPhone7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
<!--当package1和package2中的商品数量和种类出现变化时，计算属性都会重新执行。这是只是默认使用了计算属性的getter方法-->
prices:function() {
var prices = 0;
for (var i = 0;i<this.packages1.length;i++){
prices+=this.package1[i].price*this.package1[i].count;
}
for (var i = 0;i<this.packages1.length;i++){
prices+=this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
</body>
</html>
2.2、计算属性的getter方法和setter方法
每个计算属性都有getter和setter两种方法，分别是读取计算属性数据和修改计算属性数据的，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ fullName }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
firstname:'Jack',
lastname:'Green'
},
computed:{
fullName:{
<!--getter方法用于返回数据，最常用的方法-->
get:function() {
return this.firstname + ' ' + this.lastname;
},
<!--setter方法用于修改计算属性依赖的数据，这个方法一般用不到-->
set:function() {
var names = newValue.split(' ');
this.firstname = names[0];
this.lastname = names[names.length - 1];
}
}
}
});
</script>
</body>
</html>
2.3、计算属性小技巧
2.3.1、计算属性可以依赖其他计算属性
在Vue实例的计算属性中我们可以调用其他Vue实例中计算属性的返回值参与计算，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
电子产品总价：{{ price1 }}
</div>
<div id="app2">
商品总价：{{ price }}
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
package1:[
{
name:'iPhone',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
]
},
computed:{
price1:function() {
var price1=0;
for (var i=0;i<this.package1.length;i++) {
price1+=this.package1[i].price * this.package1[i].count;
}
return price1;
}
}
});
var app2=new Vue({
el:"#app2",
data:{
package2:[
{
name:'apple',
price:10,
count:1
},
{
name:'banana',
price:3,
count:3
}
]
},
computed:{
price:function() {
var price=0;
for (var i=0;i<this.package2.length;i++) {
price+=this.package2[i].price * this.package2[i].count;
}
<!--此处调用了名为app1的Vue实例中的计算属性price1参与计算，最终返回的price就是所有商品的总价-->
price+=app1.price1;
return price;
}
}
})
</script>
</body>
</html>
2.3.2 计算属性可以依赖其他Vue实例的数据
就像在计算属性中可以调用其他Vue实例的计算属性返回值一样，同样的我们也可以调用其他Vue实例中的数据参与计算，如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
</div>
<div id="app2">
商品总价：{{ price }}
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
package1:[
{
name:'iPhone',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
]
} });
var app2=new Vue({
el:"#app2",
data:{
package2:[
{
name:'apple',
price:10,
count:1
},
{
name:'banana',
price:3,
count:3
}
]
},
computed:{
price:function() {
var price=0;
for (var i=0;i<this.package2.length;i++) {
price+=this.package2[i].price * this.package2[i].count;
}
for (var i=0;i<app1.package1.length;i++) {
price+=app1.package1[i].price * app1.package1[i].count;
return price;
}
}
})
</script>
</body>
</html>
3、计算属性缓存
在第二章中我们介绍过一个跟计算属性功能类似的属性methods，在methods属性中同样可以定义函数实现一样的功能，那么为什么还会有计算属性这个看似多余的属性呢，当然是因为这两者之间是有区别的，区别就在于methods属性不会缓存计算结果，每一次页面渲染都会重新调用methods属性中的函数进行计算，而计算属性则会讲计算结果缓存起来，只要它依赖的数据没有变化，无论页面渲染多少次都不会重新调用函数进行计算，因此methods适合用于逻辑简单，数据量小的场景，而当计算逻辑较为复杂，数据量很大时则需要使用计算属性讲结果缓存，提升用户体验。
Vue基础第三章 - 计算属性的更多相关文章
- KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册
计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- java基础（三章）
java基础(三章) 一.基本if结构 1.流程图 l 输入输出 l 判断和分支 l 流程线 1.1 简单的if条件判断 if(表达式){ //表 ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue.js 学习笔记 第3章 计算属性
本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存 模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是 ...
- Vue.js-05：第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- Vue语法学习第三课——计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...
- Vue基础第四章 - v-bind指令
1.v-bind指令介绍 在前端开发过程中最常做的事莫过于class类名的绑定与style内联样式的修改,Vue中使用v-bind指令来实现这两个需求,在第二章中给出过简单的示例,下面我们来看一下v- ...
随机推荐
- leecode 238除自身以外数组的乘积
class Solution { public: vector<int> productExceptSelf(vector<int>& nums) { //用除法必须要 ...
- 关于eclipse安装插件的问题
使用eclipse(luna)不行,其为安装了ee有关插件的 使用eclipse(Juno)可以,其为原生版本
- 自定义view实现画个闪烁的心
package com.loaderman.lovecircledemo; import android.support.v7.app.AppCompatActivity; import androi ...
- 阶段3 2.Spring_10.Spring中事务控制_2 作业-基于注解的AOP实现事务控制及问题分析_上
创建maven的新项目 先复制坐标的依赖. 再把代码复制进来 先改造ioc的部分 复制上面一行代码.到下面 改成context 这里也是复制的上面两行代码.到下面改成context关键字 配置扫描的包 ...
- ALV SCRIPTFROM 内容比较全的一个例子
REPORT ZQM_PRT04. *----------------------------------------------------------------------* * TABLES ...
- Go(05)map介绍
原文地址: http://www.limerence2017.com/2019/06/11/golang06/ 基本用法 map同样也是引用类型,map在使用前需要通过make进行初始化,否则会报pa ...
- RTX系统整合记录
1.切换数据库RTX常见问题解答五. SQL数据库配置 2.同步系统组织机构 部门同步 用户同步https://blog.csdn.net/qq_21703215/article/details/80 ...
- cocos2dx基础篇(28) 布景层Layer的三个子类
[3.x] (1)去掉 "CC" [CCLayerColor] 颜色布景层CCLayerColor有两个父类:CCLayerRGBA.CCBlendProtocol.相信有 ...
- USACO1.6 Number Triangles [dp-简单dp]
题目传送门 回忆童年 /* ID: Starry21 LANG: C++ TASK: ariprog */ #include<iostream> #include<string> ...
- GitHub高级搜索
GitHub是开发目前最为活跃的开源网站和代码托管地,虽然我们经常使用GitHub,关注各种开源项目,但可能有很多人并不太了解GitHub的搜索功能的使用.GitHub提供了简单搜索和高级搜索,高级 ...