类似淘宝购物车的“全选”和“价格自动求和”用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，当选择数量的时候，所有的行的数量都会改变，应该分开的才对，不知道怎么才可以分开？
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Example
话说VueStrap的v-select是有点bug的，value只能是字符串而不能是数字，而且当选项中出现value=1,value=21,value=31...的时候，在单选情况下会出现选中多个的情况。
而且貌似v-select不支持@change事件，总体来说有点弱鸡（也有可能是我不懂得用）。
https://segmentfault.com/a/1190000004897016
价格合计用计算属性
全选
https://jsfiddle.net/papersnake/25bx2Lo9/2/
当然我这里处理的还是不严谨的，代码也写的很乱，但是处理逻辑还是对的
https://jsfiddle.net/chairuosen/gottgvLg/3/
你要的
很简单的方法，计算属性 computed