Vue04 -- 计算属性用法

<!DOCTYPE html>
<html>
<head>
    <title>Vue --- 计算属性用法</title>
</head>
<body>
    <div id="app1">
        {{prices()}}
    </div>
    

    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script type="text/javascript">
        var app1 = new Vue({
            el:'#app1',
            data:{
                package1:[
                    {
                        name:'耳机',
                        price:399,
                        count:2
                    },
                    {
                        name:'显示器',
                        price:488,
                        count:3
                    }
                ],
                package2:[
                    {
                        name:'苹果',
                        price:5,
                        count:6
                    },
                    {
                        name:'香蕉',
                        price:12,
                        count:3
                    },
                    {
                        name:'梨子',
                        price:7,
                        count:2
                    }
                ]
            },
            // computed:{
            //     reversedText: {
            //         get:function () {
            //             return this.name1+'.'+this.name2;
            //         },
            //         set:function (newvalue) {
            //             var names = newvalue.split('.');
            //             this.name1 = names[0];
            //             this.name2 = names[1];
            //         }
            //     }
            // },
            methods:{
                prices:function () {
                    var price = 0;
                    for (var i = this.package1.length - 1; i >= 0; i--) {
                        price+=this.package1[i].price * this.package1[i].count
                    }

                    for (var i = this.package2.length - 1; i >= 0; i--) {
                        price+=this.package2[i].price * this.package2[i].count
                    }
                    return price
                }
            }
        })

    </script>
</body>
</html>
Vue04 -- 计算属性用法

猜你喜欢
