<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<style>
body {
font-size: 18px;
}
.find {
width: 604px;
height: 90px;
margin: 0 auto;
}
.find input {
margin-top: 10px;
width: 600px;
height: 40px;
border: 2px solid #f5d8d8;
border-radius: 25px;
display: inline-block;
outline: none;
}
.find input:hover {
transition: 0.1s ease;
border: 2px solid #eebbbb;
}
#BOX {
width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-size: 12px;
}
#boxs {
width: 185px;
border-radius: 6px;
margin-top: 3px;
border: 1px solid rgb(243, 242, 242);
}
#boxs p {
padding-left: 10px;
}
#boxs img {
width: 167px;
height: 150px;
margin: 4% 5%;
border-radius: 7px;
}
#boxs button {
margin: 0 18% 4%;
background-color: #eac2c2;
border: none;
height: 35px;
width: 120px;
border-radius: 5px;
font-family: '宋体';
color: aliceblue;
outline: none;
}
#boxs button:hover {
transition: 0.6s ease;
background-color: #f79696;
color: black;
}
#boxs:hover {
transition: 0.6s ease;
border: 1px solid #eac2c2;
}
.form-content {
width: 1200px;
margin: 0 auto;
}
.shopping a {
position: fixed;
top: 300px;
right: 0px;
height: 35px;
width: 30px;
background-color: #f79696;
text-decoration: none;
line-height: 35px;
font-size: 13px;
font-family: "宋体";
font-weight: 700;
color: transparent;
cursor: pointer;
padding-left: 10px;
background-image: url(img/c.png);
background-position: 5px 5px;
background-repeat: no-repeat;
text-align: right;
transition: width 1s ease;
border-radius: 3px 0px 0px 3px;
}
.shopping a:hover {
text-align: center;
width: 120px;
color: #3d2222;
background-color: #f79696;
}
</style>
</head>
<body>
<div id="app">
<div class="find">
<input type="search" placeholder="请输入您要查询的物品" id="n" v-model="find">
</div>
<div class="form-content">
<div id="BOX">
<div id="boxs" v-for="(i,id) in finishs" :key="i.id">
<img :src="i.imgSrc">
<p> 商品名称：{{i.name}}</p>
<p> 商品价格：{{i.price}}元</p>
<button type="button" @click="insert(i)">添加至购物车</button>
</div>
</div>
<div class="shopping">
<a href="total.html" target="_blank">购物车</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [
{ select: true, id: 1, imgSrc: 'img/1.jpg', price: '8', name: '小毛球袜子黑色', number: '1' },
{ select: true, id: 2, imgSrc: 'img/2.jpg', price: '8', name: '小毛球袜子紫色', number: '1' },
{ select: true, id: 3, imgSrc: 'img/3.jpg', price: '8', name: '小毛球袜子玫红色', number: '1' },
{ select: true, id: 4, imgSrc: 'img/4.jpg', price: '8', name: '小毛球袜子绿色', number: '1' },
{ select: true, id: 5, imgSrc: 'img/5.jpg', price: '8', name: '小毛球袜子淡粉色', number: '1' },
{ select: true, id: 6, imgSrc: 'img/6.jpg', price: '8', name: '小毛球白袜子粉球', number: '1' },
{ select: true, id: 7, imgSrc: 'img/7.jpg', price: '8', name: '小毛球袜子黄色', number: '1' },
{ select: true, id: 8, imgSrc: 'img/8.jpg', price: '8', name: '小毛球袜子白色', number: '1' },
{ select: true, id: 9, imgSrc: 'img/9.jpg', price: '6', name: '小白熊袜子黑色', number: '1' },
{ select: true, id: 10, imgSrc: 'img/10.jpg', price: '7', name: '小翅膀袜子灰色', number: '1' },
{ select: true, id: 11, imgSrc: 'img/11.jpg', price: '5', name: '小兔子袜子黄色', number: '1' },
{ select: true, id: 12, imgSrc: 'img/12.jpg', price: '3', name: '小怪物袜子粉色', number: '1' },
{ select: true, id: 13, imgSrc: 'img/13.jpg', price: '3', name: '小怪物袜子白色', number: '1' },
{ select: true, id: 14, imgSrc: 'img/14.jpg', price: '3', name: '小怪物袜子绿色', number: '1' },
{ select: true, id: 15, imgSrc: 'img/15.jpg', price: '3', name: '小怪物袜子卡其色', number: '1' },
{ select: true, id: 16, imgSrc: 'img/16.jpg', price: '9', name: '小熊猫袜子黑白两色', number: '1' },
{ select: true, id: 17, imgSrc: 'img/17.jpg', price: '12', name: '大眼睛袜子黑白两色', number: '1' },
{ select: true, id: 18, imgSrc: 'img/18.jpg', price: '12', name: '大眼睛条纹袜子两色', number: '1' },
],
obj: [],
find: ''
},
methods: {
insert(i) {
var goodsListObj = localStorage.getItem("card-goods-list");
var goodsList = JSON.parse(goodsListObj);
if (goodsList == null) {
goodsList = [];
}
this.obj = goodsList;
if (this.obj == null) {
this.obj.push(i)
} else {
if (this.obj.includes(i)) {
var index = this.obj.indexOf(i);
this.obj[index].number++;
} else {
this.obj.push(i)
}
}
goodsList = this.obj
var objJson = JSON.stringify(goodsList);
localStorage.setItem("card-goods-list", objJson)
}
},
computed: {
finishs() {
return this.goodsList.filter((item) => {
return item.name.indexOf(this.find) !== -1
})
}
},
beforeCreate() {
localStorage.removeItem("card-goods-list");
}
})
</script>
</html>
实训购物车.zip （24个子文件） 
实训购物车 js 
vue.js 433KB img 
2.jpg 122KB 10.jpg 38KB 13.jpg 341KB
c.png 1018B 14.jpg 354KB 6.jpg 85KB 15.jpg 425KB 16.jpg 88KB 1.jpg 76KB 17.jpg 87KB 12.jpg 437KB 5.jpg 93KB favicon.ico 9KB 8.jpg 69KB 18.jpg 94KB 11.jpg 41KB 3.jpg 92KB 7.jpg 94KB 9.jpg 163KB 4.jpg 99KB css 
index.html 6KB .project 664B total.html 5KB资源评论
Zԅ(¯ㅂ¯ԅ)
- 粉丝: 102
- 资源: 12
最新资源
- 短剧搜索PHP网站源码.zip
- 2023年江苏省高职组信息安全管理与评估竞赛样题
- 智慧停车场微信小程序源码 -全开源.rar
- aspose.total.java.20.3授权免费版，懂得都懂
- 微信小程序源码-外卖商城平台的微信小程序-微信端-毕业设计源码-期末大作业.zip
- 【微信小程序源码期末大作业毕业设计】仿美团外卖小程序-小程序项目源码.zip
- aimoshengplcwnmmpjgj.zip
- 江苏省市县国土空间规划现状基数转换指南与操作流程2021
- PNG格式应用程序图标
- 机械设计双工位焊点检测设备sw18非常好的设计图纸100%好用.zip
- 使用javaSSM实现商城系统（含论文）.rar
- 2023年江苏省高职组信息安全管理与评估竞赛赛题1卷
- 使用javaSSM实现商城高级版(优秀毕业设计).rar
- 基于java+springboot+vue+mysql的国内旅游景点的数据爬虫与可视化分析 源码+数据库+论文(高分毕业设计)
- 三调、村规、国空用地地类对应表
- xshell plus 非常好用，无需安装
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
