vue项目之购物车
简单的完成一个购物车项目,满足基本功能
安装创建好项目以后需要引入安装elementui和vuex
项目目录如下:(home.vue为主页面)
### ~home.vue
<template>
<div> <!-- <div>我是默认显示页面</div> -->
<!-- 绑定自定义事件,事件函数里面执行操作 -->
<Nav v-if="see" :NavActiveIndex="activeIndex" @fromNavVal='fromNavValfn'></Nav>
<div v-else>折叠以后{{activeIndex2}}</div>
<router-view />
</div>
</template>
<script>
import Nav from './Nav.vue'
export default {
name: 'home',
components: {
//nav是home的子组件
Nav
},
data() {
return {
activeIndex: '/buycar',
activeIndex2: '',
see: true,
};
},
methods: {
fromNavValfn(val) {
//此时的val为子组件中$emit中发射过来的参数
// console.log(val)
this.activeIndex2 = val;
this.see = !this.see;
} }
}
</script>
<style> </style>
###~About.vue
<template>
<div>
This is an about page
</div>
</template> <script>
</script> <style>
</style>
###~Nav.vue
<template>
<div>
<!-- {{NavActiveIndex}} -->
<!-- 父子组件之间通讯用props和emit,无关系组件之间需要用eventbus和vuex -->
<!-- 要传入默认绑定激活的路由 default-active 此处在父组件home中 activeIndex: '/about' 默认绑定根路由下的about-->
<el-menu
:default-active="NavActiveIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
router
active-text-color="#ffd04b">
<el-menu-item index="/buycar">购物车{{buycarCount}}</el-menu-item>
<el-submenu index="">
<template slot="title">我的工作台</template>
<el-menu-item index="/about">about</el-menu-item>
<el-menu-item index="/test">test</el-menu-item>
<el-menu-item index="/test2">test2</el-menu-item>
</el-submenu>
<el-menu-item index=""><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
<button @click="click">折叠导航栏</button>
</div>
</template> <script>
import bus from '@/assets/bus.js'
export default {
name: 'nav',
props:{
NavActiveIndex:String
},
data() {
return {
activeIndex: '',
activeIndex2: 'nav的123',
buycarCount : ,
};
},
created(){
//非父子组件之间接受方法
//$on监听事件
//数量改变的时候触发这个事件
bus.$on('buycarCountChange',(num) => {
this.buycarCount = num ;
})
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
click(){
//第一个参数为父组件绑定的自定义事件名字,第二个为携带的参数
this.$emit('fromNavVal',this.activeIndex2)
}
}
}
</script> <style>
</style>
###~router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import home from '../views/Home.vue'
import test from '../views/test.vue'
// import about from '../views/About.vue' Vue.use(Router) export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'home',
component: home,
children:[
{
path:'buycar',
name:'buycar',
component: () => import('@/components/buycar.vue')
},
{
path: 'about',
name: 'about',
component: () => import ('../views/About.vue')
},
{
path: 'test2',
name: 'test',
component: () => import ('../views/test2.vue')
},
]
},
{
path:'/test',
component:test,
} ]
})
###~assets /bus.js
import Vue from 'vue';
const EventBus = new Vue(); // console.log(1)
export default EventBus; //事件注册中心
//所有的事件共同使用的
//所有的组件都可以向这个中心注册或者接受事件
###~main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// import store from './store' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
// store,
components: { App },
template: '<App/>'
})
###~store.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) // export default new Vuex.store({
// state:{
// buycarCount: 10
// },
// mutations:{
// changebuyCarCount(state,num){
// state.buycarCount = num ;
// }
// },
// actions:{
//
// }
//
//
// })
//
###~buycar.vue
<template>
<div>
<div v-if='list.length>0'>
<div>
<el-col :span="">商品信息</el-col>
<el-col :span="">尺码/颜色</el-col>
<el-col :span="">吊牌价</el-col>
<el-col :span="">数量</el-col>
<el-col :span="">折扣</el-col>
<el-col :span="">总金额</el-col>
<el-col :span="">删除</el-col>
</div>
<div>
<ul>
<li v-for="item in list">
<el-col :span="">
<el-checkbox v-model="selectArrCloth" :label="item.id" @change="item.checked = ! item.checked">{{item.name}}</el-checkbox>
<img src="../assets/logo.png" style="width: 20px; height: 20px;">
</el-col>
<el-col :span="">{{item.size}} {{item.color}}</el-col>
<el-col :span="">{{item.price}}</el-col>
<el-col :span="">
<span @click="pre(item)">-</span>
{{item.count}}
<span @click="add(item)">+</span>
</el-col>
<el-col :span="">{{item.active}}</el-col>
<el-col :span="">{{item.price * item.count * item.active}}</el-col>
<el-col :span="">
<img src="../assets/logo.png" @click="del(item)" style="width: 30px; height: 30px;">
</el-col>
</li>
</ul>
</div> </div>
<div v-else>购物车没有商品,快去逛逛</div>
<div>
<div class="cls">
<!-- {{selectArrCloth}} -->
<el-checkbox v-model="allCheck" @change="getAllChecked">全选</el-checkbox>
</div>
<div class="cls">合计 {{totalPrice}} 元</div>
<div class="cls">已选商品 {{totalCount}} 件</div>
</div>
</div> </template> <script>
import bus from '@/assets/bus.js'
export default {
data() {
return {
selectArrCloth: [],
totalCount: ,
totalPrice: ,
allCheck: false,
list: []
}
},
created() {
this.getList()
},
methods: {
getAllChecked(val) {
let selectArrCloth = [];
if (val) {
this.list.forEach(item => {
//根据状态来添加价格,所以需要点击全选的时候循环给数组中数据给true反之给false
item.checked = true;
selectArrCloth.push(item.id)
})
this.selectArrCloth = selectArrCloth;
} else {
this.list.forEach(item => {
item.checked = false;
})
this.selectArrCloth = [];
}
this.getTotalCount();
},
getTotalCount: function() {
let totalCount = ;
let totalPrice = ;
//循环添加属性
this.list.forEach(item => {
if (item.checked) {
totalPrice = totalPrice + (parseFloat(item.price).toFixed() * parseFloat(item.active) * item.count)
totalCount = totalCount + parseInt(item.count)
}
})
this.totalCount = totalCount;
this.totalPrice = totalPrice;
},
getList() {
//ajax
let arr = [{
name: '款式1',
count: '',
size: 'L',
color: '红色',
price: '',
active: '0.5',
id: ''
},
{
name: '款式2',
count: '',
size: 'L',
color: '红色',
price: '',
active: '0.5',
id: ''
},
{
name: '款式3',
count: '',
size: 'L',
color: '红色',
price: '',
active: '0.5',
id: ''
},
{
name: '款式4',
count: '',
size: 'L',
color: '红色',
price: '',
active: '0.5',
id: ''
},
]
//循环给数组中元素增加一个默认checked为false的属性
arr.forEach(item => {
item.checked = false;
})
this.list = arr;
},
pre: function(item) {
if (item.count == ) return;
item.count--;
this.getTotalCount();
},
add: function(item) {
item.count++;
this.getTotalCount();
},
del: function(item) {
//当点击这个图片的下标与数组中下标一致清除这个数据返回新数组
let index = this.list.findIndex(cloth => {
return cloth.id == item.id
})
// console.log(index)
this.list.splice(index, )
this.getTotalCount();
},
},
watch: {
//当id状态数组发生改变的时候会执行这个方法
selectArrCloth: function() {
this.getTotalCount();
if (this.selectArrCloth.length == this.list.length) {
this.allCheck = true;
} else {
this.allCheck = false;
}
},
//监听list
//此时list为一个对象
list:{
//当值为函数的时候不会进行深度遍历
//需要让其数组进行深度遍历用handler方法
//当deep为true的时候就会深度监听
handler:function(){
let count = ;
this.list.forEach(item => {
count += parseInt(item.count)
})
bus.$emit('buycarCountChange', count)
},
deep: true
}
}
}
</script>
<!-- 加上scoped为本组件生效 -->
<style scoped>
.cls {
display: inline-block;
margin-top: 50px;
margin-left: 400px;
color: red;
}
</style>
以上为购物车demo
vue项目之购物车的更多相关文章
- vue项目中icon图标的完美引入
第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- vue 项目记录.路飞学城(一)
前情提要: 通过vue 搭建路飞学城记录 一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- 前端Vue项目——登录页面实现
一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP ...
- MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://eleme ...
- 一步步创建第一个Vue项目
写在了GitHub https://github.com/TaoPanfeng/vue-cms 1 初始化 创建一个文件夹 vue-cms 在vue-cms目录下创建文件 package.json 在 ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
随机推荐
- SQL-W3School-基础:SQL INSERT INTO 语句
ylbtech-SQL-W3School-基础:SQL INSERT INTO 语句 1.返回顶部 1. INSERT INTO 语句 INSERT INTO 语句用于向表格中插入新的行. 语法 IN ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_14-页面静态化-数据模型-远程请求接口
okhttp的官方文档: https://square.github.io/okhttp/ github的地址 https://github.com/square/okhttp/ 如何远程请求轮播图的 ...
- xhprof代码添加分析性能
<?php xhprof_enable( XHPROF_FLAGS_MEMORY, [ 'ignored_functions' => [ //'call_user_func', //'ca ...
- 三小时攻克 Kubernetes!
我保证本文是最详尽的 Kubernetes 技术文档,从我在后台排版了这么漫长的时间就能看出来.废话不多说——牢牢占据容器技术统治地位的 Kubernetes,其重要性想必不言而喻. 以下为译文: 为 ...
- Vue 组件基础完整示例2
简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...
- The request was rejected because the URL contained a potentially malicious String ";"报错解决
报错信息 浏览器中看到的报错 错误摘要: The request was rejected because the URL contained a potentially malicious Stri ...
- go string类型的特性
参考文章: http://c.biancheng.net/view/36.html 1. 获取ascii类型字符的长度个数和获取utf8类型字符长度的个数 a. len("咪咪") ...
- hdu 2871 Memory Control (区间合并 连续段的起始位置 点所属段的左右端点)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=2871 题意: 四种操作: 1.Reset 清空所有内存2.New x 分配一个大小为x的内存块返回,返 ...
- tesseract 3.04在centos6上安装
tesseract是一个开源的OCR文字识别工具 查找相关文章:tesseract tesseract 4.0一直安装失败,后来参照网上的方法,成功安装3.04 1 2 3 4 5 6 7 8 9 ...
- HttpServletResponse对象(转)
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...