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- ...
随机推荐
- PLSQL查看表创建语句
在我们想要查看的表上右键选择view:
- IDEA里面maven项目使用maven插件tomcat启动项目
1.首先在pom.xml添加tomcat插件依赖: <?xml version="1.0" encoding="UTF-8"?> <proje ...
- Message的定义類型
SAP通过Message来回执程序的执行状态.使用Tcode:SE91. SAP將Message分为不同的类,如下图显示为ZF环境下ZMM01类相关Message列表. Message short t ...
- oracle 在sql中显示blob的字符串
最近在用oracle的过程中用到了对blob字段模糊查询的问题,对oracle来说,我并不是高手,找了很多的资料终于能够查出来了. blob字段直接用 select * from table_name ...
- Linux执行命令./command与直接输入命令的区别
我们知道查看文件属性的命令ls的完整文件路径为:/bin/ls(这是绝对路径,)问什么我可以在任何地方执行,任何目录下输入ls就一定可以显示出一些信息而不会说找不到该/bin/ls命令,这是因为不同的 ...
- CountDownLatch与CyclicBarrier的对比
CountDownLatch: CountDownLatch通过计数器来实现,计数器表示线程的数量.每当一个线程执行结束后,计数器的值就会减1,并在await方法处阻塞.一旦计数器为0,所有阻塞的线程 ...
- Akka系列（六）：Actor解决了什么问题？
前言..... 文档来源于 : What problems does the actor model solve? Actor解决了什么问题? Akka使用Actor模型来克服传统面向对象编程模型的 ...
- 开发完成的springboot项目扩展 swagger
第一步:pom.xml 引入 swagger 配置 <swagger.version>2.9.2</swagger.version> <!--swagger start- ...
- Oracle常用启停命令
一.监听启停 Oracle监听的启动.停止和状态查看 Oracle监听启动: lsnrctl start Oracle监听停止: lsnrctl stop Oracle监听状态 lsnrctl sta ...
- keepalived 容器在宿主机重启后无法启动问题：报错：daemon is already running
初步猜测原因是:keepalived容器内的keepalived.pid文件在keepalived容器非正常退出时,没有正确删除,造成第二次启动时容器检查到pid文件已经存在,认为该进程已经存在,因为 ...