1、计算属性介绍

在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算，但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护，比如第二章的示例{{ text.split(',').reverse().join(',') }}，为了使{{}}的内容看起来更简洁，就需要用到Vue中计算属性，如下示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue 示例</title>
  6.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.      {{ reversedText }}
  11. </div>
  12. <script>
  13.     var app=new Vue({
  14.         el:"#app",
  15.         data:{
  16.             text:'123,456'
  17.         },
            <!--计算属性在Vue的computed属性中以函数的形式定义-->
  18.         computed:{
  19.             reversedText:function() {
  20.                 return this.text.split(',').reverse().join(',');
  21.             }
  22.         }
  23.     })
  24. </script>
  25. </body>
  26. </html>

2、计算属性用法

2.1、计算属性的常用用法

计算属性通常被用于完成各种复杂逻辑，包括运算和函数调用等，计算属性可以依赖多个Vue实例数据，任意一个数据变化都会使计算属性重新执行，页面也会随之更新，如下示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue 示例</title>
  6.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.      总价：{{ prices }}
  11. </div>
  12. <script>
  13.     var app=new Vue({
  14.         el:"#app",
  15.         data:{
  16.             package1:[
  17.                 {
  18.                     name:'iPhone7',
  19.                     price:7199,
  20.                     count:2
  21.                 },
  22.                 {
  23.                     name:'iPad',
  24.                     price:2888,
  25.                     count:1
  26.                 }
  27.             ],
  28.             package2:[
  29.                 {
  30.                     name:'apple',
  31.                     price:3,
  32.                     count:5
  33.                 },
  34.                 {
  35.                     name:'banana',
  36.                     price:2,
  37.                     count:10
  38.                 }
  39.             ]
  40.         },
  41.         computed:{
                <!--当package1和package2中的商品数量和种类出现变化时，计算属性都会重新执行。这是只是默认使用了计算属性的getter方法-->
  42.             prices:function() {
  43.                 var prices = 0;
  44.                 for (var i = 0;i<this.packages1.length;i++){
  45.                     prices+=this.package1[i].price*this.package1[i].count;
  46.                 }
  47.                 for (var i = 0;i<this.packages1.length;i++){
  48.                     prices+=this.package2[i].price*this.package2[i].count;
  49.                 }
  50.                 return prices;
  51.             }
  52.         }
  53.     })
  54. </script>
  55. </body>
  56. </html>

2.2、计算属性的getter方法和setter方法

每个计算属性都有getter和setter两种方法，分别是读取计算属性数据和修改计算属性数据的，如下示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Vue 示例</title>
  6.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.      姓名：{{ fullName }}
  11. </div>
  12. <script>
  13.     var app=new Vue({
  14.         el:"#app",
  15.         data:{
  16.             firstname:'Jack',
  17.             lastname:'Green'
  18.         },
  19.         computed:{
  20.             fullName:{
                    <!--getter方法用于返回数据，最常用的方法-->
  21.                 get:function() {
  22.                     return this.firstname + ' ' + this.lastname;
  23.                 },
                    <!--setter方法用于修改计算属性依赖的数据，这个方法一般用不到-->
  24.                 set:function() {
  25.                     var names = newValue.split(' ');
  26.                     this.firstname = names[0];
  27.                     this.lastname = names[names.length - 1];
  28.                 }
  29.             }
  30.         }
  31.     });
  32. </script>
  33. </body>
  34. </html>

2.3、计算属性小技巧

2.3.1、计算属性可以依赖其他计算属性

在Vue实例的计算属性中我们可以调用其他Vue实例中计算属性的返回值参与计算，如下示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app1">
  10.         电子产品总价：{{ price1 }}
  11.     </div>
  12.     <div id="app2">
  13.         商品总价：{{ price  }}
  14.     </div>
  15.     <script>
  16.         var app1=new Vue({
  17.         el:'#app1',
  18.         data:{
  19.             package1:[
  20.                 {
  21.                     name:'iPhone',
  22.                     price:7199,
  23.                     count:2
  24.                 },
  25.                 {
  26.                     name:'iPad',
  27.                     price:2888,
  28.                     count:1
  29.                 }
  30.             ]
  31.         },
  32.         computed:{
  33.             price1:function() {
  34.                 var price1=0;
  35.                 for (var i=0;i<this.package1.length;i++) {
  36.                     price1+=this.package1[i].price * this.package1[i].count;
  37.                 }
  38.                 return price1;
  39.             }
  40.         }
  41.     });
  42.         var app2=new Vue({
  43.             el:"#app2",
  44.             data:{
  45.                 package2:[
  46.                     {
  47.                         name:'apple',
  48.                         price:10,
  49.                         count:1
  50.                     },
  51.                     {
  52.                         name:'banana',
  53.                         price:3,
  54.                         count:3
  55.                     }
  56.                 ]
  57.             },
  58.             computed:{
  59.                 price:function() {
  60.                     var price=0;
  61.                     for (var i=0;i<this.package2.length;i++) {
  62.                         price+=this.package2[i].price * this.package2[i].count;
  63.                     }
    　　　　　　　　　　　　<!--此处调用了名为app1的Vue实例中的计算属性price1参与计算，最终返回的price就是所有商品的总价-->
  64.                     price+=app1.price1;
  65.                     return price;
  66.                 }
  67.             }
  68.         })
  69.     </script>
  70. </body>
  71. </html>

2.3.2 计算属性可以依赖其他Vue实例的数据

　　就像在计算属性中可以调用其他Vue实例的计算属性返回值一样，同样的我们也可以调用其他Vue实例中的数据参与计算，如下示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  6.     <title>Vue 示例</title>
  7. </head>
  8. <body>
  9.     <div id="app1">
  10.     </div>
  11.     <div id="app2">
  12.         商品总价：{{ price  }}
  13.     </div>
  14.     <script>
  15.         var app1=new Vue({
  16.         el:'#app1',
  17.         data:{
  18.             package1:[
  19.                 {
  20.                     name:'iPhone',
  21.                     price:7199,
  22.                     count:2
  23.                 },
  24.                 {
  25.                     name:'iPad',
  26.                     price:2888,
  27.                     count:1
  28.                 }
  29.             ]
  30.         }
  31.  
  32.     });
  33.         var app2=new Vue({
  34.             el:"#app2",
  35.             data:{
  36.                 package2:[
  37.                     {
  38.                         name:'apple',
  39.                         price:10,
  40.                         count:1
  41.                     },
  42.                     {
  43.                         name:'banana',
  44.                         price:3,
  45.                         count:3
  46.                     }
  47.                 ]
  48.             },
  49.             computed:{
  50.                 price:function() {
  51.                     var price=0;
  52.                     for (var i=0;i<this.package2.length;i++) {
  53.                         price+=this.package2[i].price * this.package2[i].count;
  54.                     }
  55.                     for (var i=0;i<app1.package1.length;i++) {
  56.                         price+=app1.package1[i].price * app1.package1[i].count;
  57.                     return price;
  58.                 }
  59.             }
  60.         })
  61.     </script>
  62. </body>
  63. </html>

3、计算属性缓存

在第二章中我们介绍过一个跟计算属性功能类似的属性methods，在methods属性中同样可以定义函数实现一样的功能，那么为什么还会有计算属性这个看似多余的属性呢，当然是因为这两者之间是有区别的，区别就在于methods属性不会缓存计算结果，每一次页面渲染都会重新调用methods属性中的函数进行计算，而计算属性则会讲计算结果缓存起来，只要它依赖的数据没有变化，无论页面渲染多少次都不会重新调用函数进行计算，因此methods适合用于逻辑简单，数据量小的场景，而当计算逻辑较为复杂，数据量很大时则需要使用计算属性讲结果缓存，提升用户体验。

Vue基础第三章 - 计算属性的更多相关文章

  1. KnockoutJS 3.X API 第三章 计算监控属性(5) 参考手册

    计算监控属性构造参考 计算监控属性可使用以下形式进行构造: ko.computed( evaluator [, targetObject, options] ) - 这种形式是创建一个计算监控属性最常 ...

  2. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  3. Vue.js 生命周期、计算属性及侦听器

    一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...

  4. java基础（三章）

    java基础(三章) 一.基本if结构 1.流程图 l  输入输出 l  判断和分支 l  流程线 1.1              简单的if条件判断 if(表达式){            //表 ...

  5. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  6. Vue.js 学习笔记 第3章 计算属性

    本篇目录: 3.1 什么是计算属性 3.2 计算属性用法 3.3 计算属性缓存 模板内容的表达式常用语简单的运算,当其过长或逻辑复杂时,会难以维护,本章的计算属性就是用于解决该问题的. 3.1 什么是 ...

  7. Vue.js-05：第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  8. Vue语法学习第三课——计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...

  9. Vue基础第四章 - v-bind指令

    1.v-bind指令介绍 在前端开发过程中最常做的事莫过于class类名的绑定与style内联样式的修改,Vue中使用v-bind指令来实现这两个需求,在第二章中给出过简单的示例,下面我们来看一下v- ...

随机推荐

  1. php array function

    说明:不特殊说明都支持php4,5,7 参考:https://www.php.net/manual/zh/ref.array.php   is_array ( mixed $var ) : bool ...

  2. 第一章 SpringCloud简介

    1.架构演进与微服务 单体架构:一个归档包包含所有的功能的应用程序. 缺点: 复杂性逐渐变高 技术债务逐渐上升 部署速度逐渐变慢 阻碍技术创新 无法按需伸缩 架构演进: 单体架构 SOA 微服务 微服 ...

  3. 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  4. heartbeat高可用

    一.基本了解 1.Hearbeat和keepalived区别Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称V ...

  5. 应用安全 - 免杀 - 工具 - the-backdoor-factory - 使用|命令 - 汇总

    安装 Kali下方式一: git clone https://github.com/secretsquirrel/the-backdoor-factory方式二: apt-get install ba ...

  6. 【linux杂谈】安装linux虚拟机的时候发现的full name，user name有啥区别

    本人为了重温linux,在新电脑上又要安装linux虚拟机,在VMware内配置快速安装的时候看到有如下说明: 大家可能跟我一样对于username比较熟悉,但是这个fullname是干嘛的?我们先进 ...

  7. 深入理解java：4. 框架编程

    了解 Servlet 和 Filter Servlet(即servlet-api.jar) 是 J2EE 最重要的一部分,有了 Servlet 你就是 J2EE 了,J2EE 的其他方面的内容择需采用 ...

  8. Vmware ESXI 安装Windows

    Vmware ESXI 安装Windows >ESXi专为运行虚拟机.最大限度降低配置要求和简化部署而设计.只需几分钟时间,客户便可完成从安装到运行虚拟机的全过程,特别是在下载并安装预配置虚拟设 ...

  9. HDU 1024 Max Sum Plus Plus （动态规划、最大m子段和）

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  10. [转帖]linux学习问题总结

    linux学习问题总结 https://www.cnblogs.com/chenfangzhi/p/10661946.html 学习作者的思路 目录 一.环境变量和普通变量的区别 二.rsyslog和 ...