• 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>

    展现出来的效果是这样的

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

  • 相关阅读:
    php练习题之裁判打分
    OPENSUSE:安装方式
    openSUSE:下载帮助
    安装mysql时出现HTTP&nbsp;500&nbsp;内部服务…
    关于wamp启动是80端口被占用的问题…
    推荐15款好用的JS开发工具
    u盘美化
    wordpress怎么修改地址栏小图标
    显示桌面图标不见了
    站长必备的131个高权重外链库(转…
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9404120.html
Copyright © 2020-2023  润新知