这篇博客展示了如何利用Vue.js构建一个简单的淘宝购物车系统。主要代码包含`main.js`、`App.vue`、`Footer.vue`、`Header.vue`和`Index.vue`组件。`main.js`引入Vue并挂载应用，`App.vue`定义布局，`Footer.vue`显示购物车总价和清空功能，`Header.vue`展示页面头部信息，而`Index.vue`则实现了商品列表、数量增减和总价计算功能。通过`v-for`指令遍历商品数据，并结合计算属性`totalPrice`和`totalJF`计算总价和积分。此外，还使用了事件总线`@clear`来触发购物车清空操作。
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
APP.vue
<template>
<div id="app">
<Index></Index>
</div>
</template>
<script>
import Index from "./components/Index.vue";
export default {
name: "App",
components: {
Index,
},
};
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
}
.flex {
display: flex;
}
.j-c {
justify-content: center;
}
.j-s {
justify-content: space-between;
}
.a-c {
align-items: center;
}
a {
color: black;
}
#app {
width: 1200px;
margin: 0 auto;
/* border: 1px solid #ccc; */
padding: 0 5px;
}
</style>
Footer.vue
<template>
<div class="foot flex j-s a-c">
<div class="blue" @click="clear">清空购物车</div>
<div class="right">
<div>商品总价（不含运费）：</div>
<div><span>{ {totalprice}}</span>元</div>
<div>可获积分<span>{ {totaljf}}</span>点</div>
<div>
<img src="/image/taobao_subtn.jpg" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
name:'Footer',
props:['totalprice','totaljf'],
methods: {
clear(){
this.$emit('clear')
}
},
}
</script>
<style scoped>
.foot{
}
.right{
text-align: right;
margin-right: 10px;
}
span{
color: #FE6604;
margin: 0 5px;
font-weight: bold;
font-s
最低0.47元/天 解锁文章
扫一扫
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
