• Vue计算属性的用法


    计算属性是个很好玩的东西,在这里面可以对数据模型进行操作,·也可以使用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>

    展现出来的效果是这样的

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

  • 相关阅读:
    1.两数之和 力扣,水题
    525.连续数组 力扣 (前缀和)
    [LeetCode]56. Group Anagrams变位词分组
    界面布局注意(一)
    docker常用命令
    docker常用批量操作命令
    Golang package之math/rand
    (三)虚拟机与Linux新尝试——20155306白皎
    洛谷 P1383 codevs 3333 高级打字机
    BZOJ 1013 cogs 1845 [JSOI2008]球形空间产生器sphere
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9404120.html
Copyright © 2020-2023  润新知