计算属性是个很好玩的东西，在这里面可以对数据模型进行操作，·也可以使用getter，setter方法。使用的话也是非常的简洁明了

这里写个例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="js/vue.min.js"></script>-->

    <script src="vue.min.js"></script>

</head>

<body>

<div id="app">

    总价：{{prices}}

</div>

<script>

    var app=new Vue({

        el:'#app',

        data:{

            package1:[

                {

                    name:'iPhone 7',

                    price:7199,

                    count:2

                },

                {

                    name:'iPad',

                    price:2888,

                    count:1

                }

            ],

            package2:[

                {

                    name:'apple',

                    price:3,

                    count:5

                },

                {

                  name:'Banana',

                  price:2,

                  count:10

                }

            ]},

            computed:{

                prices:function () {

                    var prices=0;

                    for(var i=0;i<this.package1.length;i++){

                        prices+=this.package1[i].price*this.package1[i].count;

                    }

                    for (var i=0;i<this.package2.length;i++){

                        prices+=this.package2[i].price*this.package2[i].count;

                    }

                    return prices;

                }

            }

    })

</script>

</body>

</html>

在computed属性里面定义一个计算price的方法，然后对data里面的东西进行操作

下面看一下运行结果：

然后再看一下如何使用getter、setter方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.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 (newValue) {

                var names=newValue.split(' ');

                this.firstName=names[0];

                this.lastName=names[names.length-1];

            }

            }

        }

    })

</script>

</body>

</html>

展现出来的效果是这样的

也是比较简单的用法，在购物模型里面还有金融计算类的应用里面应该用的比较多这个属性

Vue计算属性的用法的更多相关文章

  1. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  2. vue - 计算属性、表单输入绑定

    计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...

  3. vue计算属性详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  4. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  5. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  6. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  7. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  8. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  9. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

随机推荐

  1. vue.js - 1

    最近开发公司vue前端项目,做一下笔记,偶尔上来查漏补缺 Vue指令之v-bind的三种用法 直接使用指令v-bind 使用简化指令: 在绑定的时候,拼接绑定内容::title="btnTi ...

  2. C/C++掌握技能（三）

    #include<cstdio> ][]={ //平年和闰年的每个月的天数 {,},{,},{,},{,},{,},{,},{,}, {,},{,},{,},{,},{,},{,} }; ...

  3. Python isinstance 与 instance 的用法

    instance: instance 属于python2的关键字,python2中如果一个类没有继承自object, 那么实例化出来的对象就是instance类型,否则就是class类型. isins ...

  4. re模块 模块

    import re findall()  烦的奥 import re # 1. findall 查找所有结果,数据不是特别庞大 lst = re.findall('a','abcsdfasdfa') ...

  5. cad2020卸载/安装失败/如何彻底卸载清除干净cad2020注册表和文件的方法

    cad2020提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2020失败提示cad2020安装未完成,某些产品无法安装,也有时候想重新安装cad2020 ...

  6. 【重要通知】本人所有技术文章转移至https://zzqcn.github.io

    本人所有技术文章转移至 https://zzqcn.github.io

  7. TCP连接详解

    一. 连接过程示意图 二. 建立TCP连接 2.1 三次握手 第一次握手:建立连接.客户端发送连接请求报文段,将SYN置为1,Sequence Number为x:然后,客户端进入SYN_SEND状态, ...

  8. 【5】JMicro微服务-熔断降级

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl   1. 使用服务熔断降级特性,必须先启动Pubsub服务,服务监听服务,熔断器服务3个服务 先启动Pubsub及服务监听两 ...

  9. 02-01 Java关键字、标识符、注释、常量和进制问题、变量和数据类型

    1:关键字 (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字有特殊颜 ...

  10. JS 在页面上直接将json数据导出到excel，支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox

    JS 在页面上直接将json数据导出到excel,支持chrome,edge,IE10+,IE9,IE8,Safari,Firefox <html> <head> </h ...