Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
瓜皮233
Vue-购物车案例
提交
b72da862
V
Vue-购物车案例
项目概览
瓜皮233
/
Vue-购物车案例
与 Fork 源项目一致
Fork自
inscode / VueJS
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
Vue-购物车案例
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
b72da862
编写于
5月 04, 2023
作者:
6
642b59b229c89a1824b83ed8
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Thu May 4 10:46:00 UTC 2023 inscode
上级
cf4a0936
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
5 addition
and
5 deletion
+5
-5
src/App.vue
src/App.vue
+1
-1
src/components/Footer/Footer.vue
src/components/Footer/Footer.vue
+3
-3
src/components/Goods/Goods.vue
src/components/Goods/Goods.vue
+1
-1
未找到文件。
src/App.vue
浏览文件 @
b72da862
...
...
@@ -2,7 +2,7 @@
<div
class=
"app-container"
>
<Header
title=
"购物车案例"
></Header>
<!-- 循环渲染每个商品 -->
<Goods
v-for=
"item in list"
:key=
"item.id"
:title=
"item.goods_name"
:
pic=
"item.goods_img"
:state
=
"item.goods_state"
<Goods
v-for=
"item in list"
:key=
"item.id"
:title=
"item.goods_name"
:
thumbnail=
"item.goods_img"
:isChecked
=
"item.goods_state"
:id=
"item.id"
:price=
"item.goods_price"
:count=
"item.goods_count"
@
change-state=
"updateGoodState"
></Goods>
<!-- 渲染底部组件 -->
<Footer
:checked=
"allChecked"
:total-amount=
"totalAmount"
:total-count=
"totalCount"
@
change-all-state=
"changeAllState"
></Footer>
...
...
src/components/Footer/Footer.vue
浏览文件 @
b72da862
...
...
@@ -2,7 +2,7 @@
<div
class=
"footer-container"
>
<!-- 左侧的全选 -->
<div
class=
"custom-control custom-checkbox"
>
<input
type=
"checkbox"
class=
"custom-control-input"
id=
"cbFull"
:checked=
"
isC
hecked"
@
change=
"toggleAllGoods"
/>
<input
type=
"checkbox"
class=
"custom-control-input"
id=
"cbFull"
:checked=
"
c
hecked"
@
change=
"toggleAllGoods"
/>
<label
class=
"custom-control-label"
for=
"cbFull"
>
全选
</label>
</div>
...
...
@@ -20,7 +20,7 @@
<
script
>
export
default
{
props
:{
isC
hecked
:{
c
hecked
:{
default
:
true
,
// 是否全选默认为 true
type
:
Boolean
,
},
...
...
@@ -36,7 +36,7 @@ export default {
methods
:{
// 切换所有商品的选中状态
toggleAllGoods
(
e
){
this
.
$emit
(
'
change
AllGoodsS
tate
'
,
{
value
:
e
.
target
.
checked
});
this
.
$emit
(
'
change
-all-s
tate
'
,
{
value
:
e
.
target
.
checked
});
},
}
}
...
...
src/components/Goods/Goods.vue
浏览文件 @
b72da862
...
...
@@ -69,7 +69,7 @@ export default {
// 切换商品选中状态
toggleGoodsChecked
(
e
)
{
// 触发一个自定义事件,将商品 ID 和选中状态传递给父组件
this
.
$emit
(
'
change
GoodsCheckedS
tate
'
,
{
id
:
this
.
id
,
isChecked
:
e
.
target
.
checked
});
this
.
$emit
(
'
change
-s
tate
'
,
{
id
:
this
.
id
,
isChecked
:
e
.
target
.
checked
});
},
},
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录