vue.js起步(自动计算总价格)

<div id="example">
        <p>{{msg}}</p>
        
        <ul>
            <li v-for="item in msg">{{item.a}}
                <input type="text" v-on:change="aa" v-model="item.c">
                {{item.b}}
            </li>
        </ul>
        
        <p>{{d}}</p>

    </div>
    <script>
        var vm = new Vue({
            el: '#example'
            , data: {
                msg:[{"a":"a1","b":10,"c":0},{"a":"a2","b":20,"c":1},{"a":"a3","b":30,"c":1}]            }
            , computed: {
                // 一个计算属性的 getter
                d:function(){
                    var len=this.msg.length;
                    var all=0;
                    for(var i=0;i<len;i++){
                        var li=parseInt(this.msg[i].b*this.msg[i].c);
                        all+=li;
                    }
                    return all;
                }
            },
            methods:{
                aa:function(){
                    var len=this.msg.length;
                    var all=0;
                    for(var i=0;i<len;i++){
                        var li=parseInt(this.msg[i].b*this.msg[i].c);
                        all+=li;
                    }
                    
                }
            }
        })
    </script>

posted @ 2017-01-04 13:56  fm060  阅读(975)  评论(0)    收藏  举报