溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用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>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
