前端开发 Vue.js 小练习_购物车

vue.js前端开发快速入门|vue.js前端开发快速入门与专业应用

当没有商品选中时则不能提交表单,支持全选全不选
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”UTF-8″>
<title>vuejs前端开发</title>
<linkrel=”stylesheet” href=”https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css” />
<style>
.table{
margin-top:100px;
}
</style>
</head>
<body>
<divclass=”container hidden” id=”app”>
<tableclass=”table table-striped table-bordered”>
<tr>
<th>#</th>
<th>
<inputtype=”checkbox” v-model=”checkedAll” v-on:click=”checkAll()” />全选</th>
<th>商品</th>
<th>单价</th>
<thstyle=”width: 120px;”>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<trv-for=”(item,index) in goods”>
<td>{{index}}</td>
<td>
<inputtype=”checkbox” v-model=”item.checked” v-on:click=”checkbox()” />
</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<divclass=”input-group”>
<spanclass=”input-group-addon” v-on:click=”reduce(index)”>-</span>
<inputtype=”text” class=”form-control” aria-label=”Amount (to the nearest dollar)” v-model=”item.num”>
<spanclass=”input-group-addon” v-on:click=”add(index)”>+</span>
</div>
</td>
<td>{{item.num*item.price}}</td>
<td>
<buttontype=”button” class=”btn btn-danger” v-on:click=”modal(index)”>删除</button>
</td>
</tr>
<tr>
<td>总价</td>
<tdcolspan=”5″>{{totalPrice}}</td>
<td>
<buttontype=”button” class=”btn btn-danger” v-on:click=”modal(-2)”>清空购物车</button>
</td>
</tr>
</table>
<buttontype=”button” class=”btn btn-danger” v-bind:class=”{disabled:!submit}” v-on:click=”onsubmit()”>提交订单</button>
<!–弹出框–>
<divclass=”modal fade” id=”mymodal” tabindex=”-1″ role=”dialog”>
<divclass=”modal-dialog” role=”document”>
<divclass=”modal-content”>
<divclass=”modal-header”>
<buttontype=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<spanaria-hidden=”true”>&times;</span>
</button>
<h4class=”modal-title”>提示</h4>
</div>
<divclass=”modal-body”>
<p>确定要删除{{removegood}}吗?</p>
</div>
<divclass=”modal-footer”>
<buttontype=”button” class=”btn btn-default” data-dismiss=”modal”>取消</button>
<buttontype=”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>
varapp=newVue({
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){//数量减少
varvm=this;
vm.goods[index].num–;
if (vm.goods[index].num<1) {
vm.goods[index].num=1;
vm.modal(index);
}
},
modal:function(index){//弹窗
varvm=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(){//全选
varvm=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,如果一个都没选中则不能提交订单
varvm=this;
varlen=vm.goods.length;
varn=0;
for (vari=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(“请选择要购买的商品”)
returnfalse;
}
console.log(JSON.stringify(this.goods))
}
},
computed: { //计算总金额
totalPrices:function(){
vartotal=0;
this.goods.forEach(function(mes){
if (mes.checked) {
total+=mes.num*mes.price
}
})
this.totalPrice=total;
returnthis.totalPrice;
}
},
watch: { //实时观察金额是否有变化
totalPrices:function(newValue,oldValue){
returnthis.totalPrice=newValue;
}
},
mounted:function(){//为了防止闪屏,数据渲染后再显示DOM
$(“#app”).removeClass(“hidden”);
}
})
</script>
</body>
</html>
vue.js开发前端|前端开发框架vue|网站前端开发
» 本文来自:前端开发者 » 《前端开发 Vue.js 小练习_购物车》
» 本文链接地址:https://www.rokub.com/3550.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!