Vue计算属性

作者: Dxes | 来源:发表于2019-12-12 17:46 被阅读0次

Vue筛选日期和 Vue实例的属性计算属性
Vue筛选日期和 Vue实例的属性计算属性
Vue复习
Vue进阶
Vue总结2-计算属性,函数,过滤器,过渡动画
2018-09-17
2020-07-28
4.vue计算属性，方法和侦听器
vue计算属性、vue属性、filter过滤保留俩位小数、怎么
Vue之计算属性computed（一）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style type="text/css">
            .name{
                color: red;
                font-size: 30px;
            }
            .price{
                color: seagreen;
                font-size: 20px;
                
                
            }
        </style>
    </head>
    <body>
        <div id="app1">
            <div class="goods" v-for="goods in goodsList" v-bind:style="background">
                <p class="name">{{goods.name}}</p>
                <p class="price">￥{{goods.price}}</p>
                <hr />
            </div>
            
            <p>总价:{{totalPrice}}</p>
            <p>{{num1+num2}}</p>
            
            <input type="color" v-model="color" />
        </div>
        <script type="text/javascript">
            var app1 = new Vue({
                el: '#app1',
                data:{
                    color:'#ff0000',
                    goodsList: [
                        {name:'辣条', price:1},
                        {name:'泡面', price:3.5},
                        {name:'二锅头', price:8},
                        {name:'火腿肠', price:2},
                        {name:'卤蛋', price:1}
                    ],
                    num1: 100,
                    num2: 200
                },
                computed:{
                    background: function(){
                        return 'background-color:'+this.color+';'
                    },
                    totalPrice:function(){
                        var sum1 = 0
                        for(var goods of this.goodsList){
                            sum1 += goods.price
                        }
                        
                        return sum1
                    }
                }
            })
            
        </script>
    </body>
</html>

<!--goodsList: [
                        {name:'辣条', price:1},
                        {name:'泡面', price:3.5},
                        {name:'二锅头', price:8},
                        {name:'火腿肠', price:2}
                    ]-->