Vue组件简易模拟实现购物车

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 Vue组件简易模拟实现购物车 的全部内容, 来源链接: utcz.com/p/238736.html

回到顶部