前端ABC当没有商品选中时则不能提交表单，支持全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.table{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container hidden" id="app">
<table class="table table-striped table-bordered">
<tr>
<th>#</th>
<th><input type="checkbox" v-model="checkedAll" v-on:click="checkAll()" />全选</th>
<th>商品</th>
<th>单价</th>
<th style="width: 120px;">数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in goods">
<td>{{index}}</td>
<td><input type="checkbox" v-model="item.checked" v-on:click="checkbox()" /></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<div class="input-group">
<span class="input-group-addon" v-on:click="reduce(index)">-</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" v-model="item.num">
<span class="input-group-addon" v-on:click="add(index)">+</span>
</div>
</td>
<td>{{item.num*item.price}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="modal(index)">删除</button></td>
</tr>
<tr>
<td>总价</td>
<td colspan="5">{{totalPrice}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="modal(-2)">清空购物车</button></td>
</tr>
</table>
<button type="button" class="btn btn-danger" v-bind:class="{disabled:!submit}" v-on:click="onsubmit()">提交订单</button>
<!--弹出框-->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">提示</h4>
</div>
<div class="modal-body">
<p>确定要删除{{removegood}}吗？</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" v-on:click="remove(nowIndex)">确定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
totalPrice:0, //总金额
nowIndex:-10, //控制弹窗
removegood:'', //要删除的物品
checkedAll:false, //全选
submit:false, //提交，true为可以提交，false为不能提交
goods:[
{
id:'001',
checked:false,
name:"javascript",
price:120,
num:1
},
{
id:'002',
checked:false,
name:"java",
price:100,
num:1
},
{
id:'003',
checked:false,
name:"php",
price:110,
num:1
}
]
},
methods: {
add: function(index){ //数量增加
this.goods[index].num++;
},
reduce: function(index){ //数量减少
var vm = this;
vm.goods[index].num--;
if(vm.goods[index].num < 1){
vm.goods[index].num = 1;
vm.modal(index);
}
},
modal: function(index){ //弹窗
var vm = this;
vm.nowIndex = index;
if(index >= 0){
vm.removegood = vm.goods[index].name;
}else{
vm.removegood = "购物车全部商品"
}
$("#mymodal").modal();
},
remove: function(n){ //判断是删除一个商品还是清空购物车
if(n == -2){
this.goods = [];
return;
}
this.goods.splice(n,1);
},
checkAll: function(){ //全选
var vm = this;
vm.goods.forEach(function(element) {
if(vm.checkedAll){
element.checked = true;
vm.submit = true;
} else{
element.checked = false;
vm.submit = false;
}
});
},
checkbox: function () { //选中某一个商品，如果全部选中则 checkedAll 为true，如果一个都没选中则不能提交订单
var vm = this;
var len = vm.goods.length;
var n = 0;
for (var i = 0; i < len; i++) {
if(vm.goods[i].checked){
n++;
if(n == len){
vm.checkedAll = true;
} else{
vm.checkedAll = false;
}
}
}
if (n > 0) {
vm.submit = true;
} else {
vm.submit = false;
}
},
onsubmit: function(){ //提交订单，需要判断是否有选中的商品
if(this.totalPrice == 0){
console.log("请选择要购买的商品")
return false;
}
console.log(JSON.stringify(this.goods))
}
},
computed: { //计算总金额
totalPrices: function(){
var total = 0;
this.goods.forEach(function(mes){
if(mes.checked){
total += mes.num*mes.price
}
})
this.totalPrice = total;
return this.totalPrice;
}
},
watch:{ //实时观察金额是否有变化
totalPrices: function(newValue, oldValue){
return this.totalPrice = newValue;
}
},
mounted: function(){ //为了防止闪屏，数据渲染后再显示DOM
$("#app").removeClass("hidden");
}
})
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » vue小练习—购物车