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- ...
随机推荐
- leetcode 41缺失的第一个正数
time O(n) space O(1) class Solution { public: int firstMissingPositive(vector<int>& nums) ...
- [Flask]通过render_form快捷渲染表单
依赖: Bootstrap-Flask 实例化方式与flask_bootstrap相同. 关于render_form(): Bootstrap-Flask内置了两个用于渲染WTForms表单类的宏,r ...
- nodejs之express静态路由、ejs
1.静态路由与ejs使用 /** *1.安装ejs npm install ejs --save-dev * *2.express 里面使用ejs ,安装以后就可以用,不需要引入 * *3.配置exp ...
- pytest_1安装和启动
一.安装和启动 1.1 安装pytest 1. 键入Ctrl+R,打开cmd,输入命令至python环境下(本机:D:\Python27>) 2. 在python环境下运行下面的命令即可安装py ...
- Activity启动场景Task分析(二)
场景分析 下面通过启动Activity的代码来分析一下: 1.桌面 首先,我们看下处于桌面时的状态,运行命令: adb shell dumpsys activity 结果如下 ACTIVITY MAN ...
- jquery.qrcode.min.js——前端生成二维码
下载地址:[http://www.jq22.com/jquery-info294] demo1:[https://www.helloweba.com/view-blog-226.html] demo2 ...
- crond服务总结
昨天翻阅程序发现服务器端管理程序的启动方式很特别,在之前是由init进程启动程序脚本里的进程,昨天发现服务程序并没有在任何脚本中有启动的体现,但是服务程序确实是启动了,经过一番查找发现原来是crond ...
- P1936 【水晶灯火灵】
lalala~~(才不会告诉你这是题面呢) 这题确实有点坑,第一遍穷举超时,然后就开始了漫漫找规律之路... 终于,在经过5分钟的纠结之后,我终于发现了这个神奇的规律,那就是 Fabonacci!!! ...
- Java中volatile关键字的最全总结
转载至:https://blog.csdn.net/u012723673/article/details/80682208 关于volatile很重要的一点: 它保证了可见性,即其他线程对volati ...
- 最常见的Python异常报错Error
内置异常 官网链接:https://docs.python.org/zh-cn/3/library/exceptions.html 在 Python 中,所有异常必须为一个派生自 BaseExcept ...