zoukankan      html  css  js  c++  java
  • 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>

    展现出来的效果是这样的

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

  • 相关阅读:
    std::type_index(转)
    __sync_fetch_and_add系列(转)
    InterlockedIncrement函数详解(转)
    如何让服务端同时支持WebSocket和SSL加密的WebSocket(即同时支持ws和wss)?(转)
    Linux系统管理基础测试
    CentOS7.7源码包安装Cmake3.0
    Shell-三剑客(sed)
    问题-突然发现公司网站访问速度变的很慢很慢
    Linux基础命令之文件及目录管理
    Linux基础命令之进程管理
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9404120.html
Copyright © 2011-2022 走看看