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- ...
随机推荐
- 解决打开AS多次提示Untrusted Server's certificate问题
解决方法如下: 打开Studio左上角的file—>Setting-->Tools-->Server Certificates ->最后勾上 Accept non-truste ...
- Python_List对象内置方法详解
目录 目录 前言 软件环境 列表List 修改列表的元素 插入列表元素 extend 将序列中的元素迭代的附加到list中 insert 在指定的索引号中插入一个元素 删除列表元素 del 删除Lis ...
- 十九：jinja2之set和with语句定义变量
set jinja2模板内部可以用set定义变量,只要定义了这个变量,在后面的代码中都可以使用此变量 with 如果想让定义的变量只在部分作用域内有效,则不嫩更实用set,需使用with定义,with ...
- vue中html、css、js 分离
在正常的创建和引用vue文件都是html.css.js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优 ...
- asp.net mvc中用 log4net记录日志到数据库中
1.log4net官网配置相关,创建数据库 http://logging.apache.org/log4net/release/config-examples.html CREATE TABLE [d ...
- UOJ#48最大矩形面积
题面 这是一道标准的单调栈的题目,但是由于题目的个例性,该题对于前后两数等于的情况并无额外处理,so也确实是让这题简单了一点 也没什么好说的直接上代码吧 #include<iostream> ...
- unable to compile class for jsp解决方案
今天遇到了一个错误,纠结了两天,百度很多经验,结果都不太起效.通过比较自己之前不报错的项目,发现以下解决方案. 报错: 解决方案: 1.先将jar 包复制到lib目录下. 2.将lib目录下的jar包 ...
- ARM的编程模式及寄存器
根据朱老师的课程及下面博客整理 http://blog.chinaunix.net/uid-20443992-id-5700979.html ARM 采用的是32位架构 ARM 约定: Byte : ...
- EINT DINT ERTM DRTM EALLOW EDIS ESTOP0的理解
本文参考以下资料整理 https://wenku.baidu.com/view/6b0d6906cf84b9d528ea7a66.html http://pangqicheng123.blog.163 ...
- 【VS开发】【图像处理】GigE和USB3 vision选择？
[VS开发][图像处理]GigE和USB3 vision选择? 具体得看你现场的应用吧,如 现场需要的工作距离,网线可达到100m以内,USB3.0一般般的5m以内: GigE双端都有卡扣,保证了与相 ...