<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style type="text/css">
table{
width: 400px;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body>
<div id="shopping">
<table border="3px" cellspacing="" cellpadding="" >
<tr>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in arr" :class="{'yellow':item.num>0}">
<td >{{arr[index].name}}</td>
<td>¥{{arr[index].pri}}</td>
<td>
<button type="button"v-if="arr[index].num==hide?hide:true" @click="jian(item,index)" v-else="0">-</button>
{{arr[index].num}}
<button type="button" @click="jia(item,index)">+</button>
</td>
<td>
<button type="button" @click="sw(item,index)">编辑</button>
<button type="button" @click="del">删除</button>
</td>
</tr>
<tr>
<td></td>
<td>总价:{{zpri()}}</td>
<td>总数量:{{num()}}</td>
<td></td>
</tr>
</table>
<button type="button" @click="show">添加商品</button>
<button type="button" v-show="sh" @click="show">取消</button>
<input type="text" v-show="sh" v-model="val"/>
<input type="text" v-show="sh" v-model="vala"/>
<button type="button" v-show="sh" @click="chuan">确认</button>
<div class="" v-show="so" >
<button type="button" @click="sw">取消</button>
<input type="text" name="" id="" value="" v-model="va"/>
<input type="text" name="" id="" value="" v-model="vl"/>
<button type="button" @click="cfi(ix)">确认</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#shopping',
data(){
return{
sh:false,
so:false,
val:'',
vala:'',
className:'yellow',
arr:[
{
"name":111,
"pri":10,
"num":0,
},
{
"name":222,
"pri":20,
"num":0,
},
],
hide:false,
sho:true,
price:0,
znum:0,
va:'',
vl:'',
ix:'',
}
},
methods:{
show(){
this.sh=!this.sh;
},
sw(item,index){
this.so=!this.so;
this.va=this.arr[index].name;
this.vl=this.arr[index].pri;
this.ix=index;
},
cfi(ix){
this.arr[ix].name=this.va;
this.arr[ix].pri=this.vl;
},
chuan(){
this.arr.push({
"name":this.val,
"pri":this.vala,
"num":0,
})
console.log(this.arr);
},
jian(item,index){
this.arr[index].num--;
},
jia(item,index){
this.arr[index].num++;
},
num(){
var nu=0;
for(let i=0;i<this.arr.length;i++){
nu+=this.arr[i].num
}
return nu;
},
zpri(){
var zp=0;
for(let i=0;i<this.arr.length;i++){
zp+=this.arr[i].num*this.arr[i].pri
}
return zp;
},
del(item,index){
this.arr.splice(index,1);
}
},
})
</script>
</body>
</html>
Vue2简易购物车
最新推荐文章于 2024-05-03 17:26:07 发布