使用Vue组件怎么实现一个购物车功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
具体内容如下
代码：
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<style>
#app{
width:600px;
}
#myTable{
width:500px;
border-collapse:collapse;
}
td, th{
text-align: center;
font-size:20px;
border:2px solid black;
}
td{
height: 40px;
}
input{
width: 30px;
text-align: center
}
</style>
</head>
<body>
<div id="app">
<my-cart></my-cart>
</div>
<script>
var MyCommmodity = {
props: ["list"],
template:`
<div>
<button @click="baicai">白菜</button>
<button @click="qingcai">青菜</button>
<button @click="luobo">萝卜</button>
</div>
`,
methods: {
baicai: function(){
var cai = {};
cai.id = 4;
cai.name = "白菜"
cai.price = 3;
cai.num = 1;
this.list.push(cai)
},
qingcai: function(){
var cai = {};
cai.id = 5;
cai.name = "青菜"
cai.price = 6;
cai.num = 1;
this.list.push(cai)
},
luobo: function(){
var cai = {};
cai.id = 6;
cai.name = "萝卜"
cai.price = 8;
cai.num = 1;
this.list.push(cai)
}
}
}
var MyTable = {
props: ["list", "flag"],
template:`
<table id="myTable">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr :key="item.id" v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button :disabled="flag" @click="sub(item.id)">-</button>
<input type="text" :value="item.num" @blur="changeNum(item.id,$event)">
<button @click="add(item.id)">+</button>
</td>
<td>
<button @click="del(item.id)">删除</button>
</td>
</tr>
</table>
`,
methods: {
changeNum: function(id, event){
this.$emit("change-num",{
id: id,
type: "change",
num: event.target.value
});
},
sub: function(id){
this.$emit("change-num",{
id: id,
type: "sub"
})
},
add: function(id){
this.$emit("change-num",{
id: id,
type: "add"
})
},
del: function(id){
// alert(id);
this.$emit("del-cart",id)
}
}
}
var MyPrice = {
props: ["list"],
template:`
<div>
<span>结算：</span>
<span>{{total}}</span>
</div>
`,
computed: {
total: function(){
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart', {
data () {
return {
flag:false,
list:[{
id: 1,
name: "猪",
price: "10",
num:1,
},
{
id: 2,
name: "牛",
price: "11",
num:1,
},
{
id: 3,
name: "鸡",
price: "13",
num:1,
}]
}
},
template:`
<div>
<my-commmodity :list="list"></my-commmodity>
<my-table :list="list" :flag="flag" @change-num="changeNum($event)" @del-cart="delCart($event)"></my-table>
<my-price :list="list"></my-price>
</div>
`,
components:{
'my-table':MyTable,
'my-price':MyPrice,
'my-commmodity':MyCommmodity,
},
methods:{
changeNum: function(val){
if(val.type ==="change"){
this.list.some(item=>{
if(item.id == val.id){
item.num = val.num;
return true;
}
});
}else if(val.type ==="sub"){
this.list.some(item=>{
if(item.id == val.id && item.num >0){
item.num -= 1;
return true;
}
});
}else if(val.type ==="add"){
this.list.some(item=>{
if(item.id == val.id){
item.num += 1;
return true;
}
});
}
},
delCart: function(id){
var index = this.list.findIndex(item=>{
return item.id == id;
})
this.list.splice(index,1)
}
}
})
var vm = new Vue({
el: '#app',
data:{
}
})
</script>
</body>
</html>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
