<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<style>
.list,
.list li{
list-style: none;
padding: 0;
margin: 0;
}
.list{
1000px;
}
.list li{
float: left;
33.33%;
text-align: center;
}
.allprice{
clear: both;
padding-top: 50px;
1000px;
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div v-if="show">
<ul class="list">
<li v-for="(book,index) in book" :key="index">
<div class="media"><img :src="book.picture" width="100" /></div>
<div class="name">{{book.name}}</div>
<div class="kc">库存：{{book.stock}}</div>
<div class="price">价格：${{book.price}}</div>
<div class="buynum"><input type="number" class="text" v-model="book.value" @change="checkNum()" /></div>
</li>
</ul>
<!-- <div class="li">商品价格：<input placeholder="输入产品价格" type="number" v-model="value" /></div>
<div class="li">
商品数量：<input value="-" type="button" @click="minusNum" /> <span class="num">{{number}}</span> <input value="+" type="button" @click="increaseNum" />
</div> -->
<div class="allprice">
<input value="计算总价" type="button" @click="calculation" />
</div>
<div class="allprice">
总价格：<span class="price">{{priceList}}</span>
</div>
<div class="allprice">
总价格：<span class="price">{{allpriceList}}</span>
</div>
<div class="allprice">
<input value="提交订单" type="button" @click="transmit" />
</div>
</div>
<div v-else>
商品总价：{{priceList}}
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
//定义书本信息
show:true,
book: [
{
name: '眼睛书',//名字
price: 310,//价格
stock:440,//库存
picture:"1.jpg",//图片
value:"0"//购买件数
},{
name: '眼睛书1',
price: 300,
stock:400,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书2',
price: 320,
stock:430,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书3',
price: 350,
stock:460,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书4',
price: 380,
stock:490,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书5',
price: 310,
stock:400,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书6',
price: 300,
stock:400,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书7',
price: 300,
stock:400,
picture:"1.jpg",
value:"0"//购买件数
},{
name: '眼睛书8',
price: 300,
stock:400,
picture:"1.jpg",
value:"0"//购买件数
}
],
priceList:0
},
computed:{
allpriceList:function(){
let total = 0;
let totalList = 0;
this.book.forEach(function(s){
if(s.value > 0){
total = s.price * s.value;
totalList = totalList + total;
}
})
//this.priceList = totalList;
return totalList;
}
},
methods:{
calculation:function(){
let total = 0;
let totalList = 0;
this.book.forEach(function(s){
if(s.value > 0){
total = s.price * s.value;
totalList = totalList + total;
}
})
this.priceList = totalList;
},
checkNum:function(){
this.book.forEach(function(s){
if(s.value>s.stock){
alert("超过产品库存,请重新输入")
s.value = 0
}
else if(s.value<0){
s.value = 0
alert("不能再少了")
}
})
},
transmit:function(){
this.show = false
}
}
})
</script>
</body>
</html>