前端-vue基础71-购物车5商品数量的变更

最新推荐文章于 2023-11-29 01:36:42 发布

前端歌谣

最新推荐文章于 2023-11-29 01:36:42 发布

阅读量199

点赞数

文章标签：前端 vue.js servlet

本文链接：https://blog.csdn.net/qq_41632427/article/details/125933901

版权

歌谣-vue-初始学习专栏收录该内容

105 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div id="app">
<div class="container">

<my-cart></my-cart>

</div>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script>
var CartTitle = {
props: ['uname'],
template: `
<div class="title">{{uname}}的商品</div>
`
}
var CartList = {
props: ['list'],
template: `
<div>
<div :key='item.id' v-for='item in list' class='item'>
<div class='name'>{{item.name}}</div>
<div class='change'>
<a href="">-</a>
<input type="text" class="num" :value='item.num' @blur='changeNum(item.id,$event)'>
<a href="">+</a>
</div>
<div class="del" @click='del(item.id)'>X</div>
</div>
</div>
`,
methods: {
changeNum: function(id, event) {
console.log(1);
console.log(id, event.target.value);
this.$emit('change-num', {
id: id,
num: event.target.value
})
},
del: function(id) {
console.log(id);
//把id传给父亲组件
this.$emit('cart-del', id);
}

}
}

var CartTotal = {
props: ['list'],
template: `
<div class="total">
<span>总价{{total}}</span>
<button>结算</button>
</div>
`,
computed: {
total: function() {
//计算
var t = 0;
this.list.forEach(item => {
t += item.price * item.num;
});
return t;
}
}
}
Vue.component('my-cart', {
data: function() {
return {
uname: '张三',
list: [{
id: 1,
name: 'TCL彩电',
price: 1000,
num: 1,
}, {
id: 2,
name: 'TCL彩电',
price: 1000,
num: 1,
}, {
id: 3,
name: 'TCL彩电',
price: 1000,
num: 1,
}, {
id: 4,
name: 'TCL彩电',
price: 1000,
num: 1,
}, {
id: 5,
name: 'TCL彩电',
price: 1000,
num: 1,
}, ]
}
},
template: `
<div class='cart'>
<cart-title :uname='uname'></cart-title>
<cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
<cart-total :list='list'></cart-total>
</div>
`,
components: {
'cart-title': CartTitle,
'cart-list': CartList,
'cart-total': CartTotal,
},
methods: {
changeNum: function(val) {
console.log(val);
//根据子组件传递数据更新list对应数据
this.list.some(item => {
if (item.id == val.id) {
item.num = val.num;
//终止
return true;
}
});
},
delCart: function(id) {
//根据id删除list数据
//找到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>