computed属性和watch属性的区别之四【购物车之computed】

最新推荐文章于 2023-12-13 18:24:37 发布

宇智波幽助

最新推荐文章于 2023-12-13 18:24:37 发布

阅读量271

点赞数

分类专栏： vue 文章标签： watch属性 computed属性

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78649350

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<body>

    <div id = 'app'>
        <div>
            <h3>{{title}}</h3>
        </div>
        <div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <td>名称</td>
                            <td>价格（元）</td>
                            <td>数量（kg）</td>
                            <td>共计（元）</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for = 'item in list '>
                            <td>{{item.name}}</td>
                            <td><input type="number" v-model = 'item.price'></td>
                            <td><input type="number" v-model = 'item.number'></td>
                            <td>{{item.price * item.number}}</td>
                        </tr>
                        <tr>
                            <td>合计</td>
                            <td>{{single_price_sum}}</td>
                            <td>{{single_number_sum}}</td>
                            <td>{{all_total}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">

        var _vm = new Vue({
            data : {
                title : 'computed属性和watch属性的区别之四【购物车之computed】',
                list : [
                    {id : 1, name : '大白菜', price : 10, number : 1, },
                    {id : 2, name : '小白菜', price : 20, number : 2,},
                    {id : 3, name : '中白菜', price : 30, number : 3,}
                ]
            },
            computed : {
                all_total : function() {
                    var _total = 0 ;
                    this.m_each(function(item) {
                        _total += item.price * item.number ;
                    }) ;
                    return _total ;
                },
                single_number_sum : function() {
                    var _num = 0 ;
                    this.m_each(function(item) {
                        _num += parseFloat(item.number) ;
                    }) ;
                    return _num ;
                },
                single_price_sum : function() {
                    var _price = 0 ;
                    this.m_each(function(item) {
                        _price += parseFloat(item.price) ;
                    }) ;
                    return _price ;
                }
            },
            methods : {
                m_each : function(callback) {
                    for(var i = 0; i < this.list.length; i++) {
                        callback(this.list[i]) ;
                    }
                }
            }
        }).$mount('#app') ;
    </script>
</body>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed属性和watch属性的区别之四【购物车之computed】

<body> <div id = 'app'> <ul v-for = '(value, key) in map'> {{key}} - {{value}} </ul> </div> <script type="text/javascript" src = 'https://cdn.bootcss.com/vue/2.5.
复制链接

扫一扫