javascript - 类似淘宝购物车的“全选”和“价格求和”用vuejs怎么做？

类似淘宝购物车的“全选”和“价格自动求和”用vuejs怎么做？如果单使用vuejs不方便的话混合jquery也行。
demo：https://jsfiddle.net/kanjiushi/n4uujq01/6/

因为jsfiddle可能无法访问，所以再贴一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<p class="container">
    <p class="card">
        <h3 class="card-header">Cart</h3>
        <p class="card-block">
            <p id="app">
                <p class="row">
                    <p class="col-xs-3">
                        <label class="c-input c-checkbox">
                            <input type="checkbox" name="good[]" value="{{ $good->id }}">Select All
                            <span class="c-indicator"></span>
                        </label>
                    </p>
                    <p class="col-xs-2">
                        Goods
                    </p>
                    <p class="col-xs-5">
                        Number
                    </p>
                    <p class="col-xs-2">
                        Money
                    </p>
                </p>
                <form>
                    <template v-for="item in items">
                        <p class="row">
                            <p class="col-xs-3">
                                <label class="c-input c-checkbox">
                                    <input type="checkbox" name="good[]" value="{{ $good->id }}">
                                    <span class="c-indicator"></span>
                                </label>
                            </p>
                            <p class="col-xs-2">
                                {{ item.message }}
                            </p>
                            <p class="col-xs-5">
                                <v-select :value.sync="val">
                                    <v-option value="1">1</v-option>
                                    <v-option value="2">2</v-option>
                                    <v-option value="3">3</v-option>
                                    <v-option value="4">4</v-option>
                                    <v-option value="5">5</v-option>
                                </v-select>
                            </p>
                            <p class="col-xs-2">
                                {{ subtotal }}
                            </p>
                        </p>
                    </template>

                    <p class="row">
                        <p class="col-xs-3">
                            Sum
                        </p>
                        <p class="col-xs-2">

                        </p>
                        <p class="col-xs-5">

                        </p>
                        <p class="col-xs-2">
                            {{ sum }}
                        </p>
                    </p>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </p>
        </p>
    </p>
</p>

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-strap/1.0.11/vue-strap.min.js"></script>
<script>
    var vm = new Vue({
        components: {
            vSelect: VueStrap.select,
            vOption: VueStrap.option
        },
        el: "#app",
        data: {
            showRight: false,
            showTop: false,
            val: '',
            items: [
                {message: 'Apple'},
                {message: 'Peach'},
                {message: 'Orange'},
                {message: 'Pear'}
            ]
        },
        computed: {
            subtotal: function () {
                return this.val * 1.5
            },
            sum: function () {
                // sum of subtotal.How to write here?
            }
        }
    });
</script>
</body>
</html>

截图：

说明：
1、全选和取消全选

(1)、选中最上面的“全选”复选框，会全部选中下面的项；取消最上面的“全选”复选框，下面的项会全部取消。

(2)、手动选中下面的每一项，当全部选中时，最上面的“全选”复选框会自动选中；再取消一项时，“全选”复选框会取消选中，也就是没有处于全选状态时，“全选”复选框不会处于选中状态。

2、下面的“合计”，会自动对选中的项进行金额合计。

3、当没有选中项时，提交按钮处于不可用状态。刚打开页面的时候，默认是没有选中任何项的，所以这时提交按钮应处于不可用状态。

还有一个问题：
当前的demo，当选择数量的时候，所有的行的数量都会改变，应该分开的才对，不知道怎么才可以分开？

# JavaScript

高洛峰2184 天前620 次浏览

javascript - 类似淘宝购物车的“全选”和“价格求和”用vuejs怎么做？

全部回复(5) 我要回复