小编给大家分享一下vue怎么实现的仿淘宝购物车功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
具体如下:
下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面
首先简单介绍一下可能会用到的一些vue.js的用法:
v-bind,绑定属性;例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1;v-bind:src="image",image就是图像的路径;
v-if="flag"与v-show="flag",如果flag为true,则绑定的为“可见”,不同的是v-show是一开始就渲染在DOM中的,改变的则是它的display而已,而v-if为false则是从HTML代码中移除;
v-on:或@,样式绑定v-on:click="dosomething()"或者@click="dosomething()",点击触发dosomething函数;
v-for循环,v-for="item in items",items为数组,item为items数组的值而不是索引;
要注意的是当this作用域的改变:当this作用域改变是我们设置var self = this,在之后的使用中用self代替;
下面是HTML代码:
<html>
<head>
<title>购物车</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="shop.css" rel="external nofollow" >
</head>
<body>
<div id="app">
<div class="header"><span >商品</span><span >单价</span><span >数量</span><span >总价</span></div>
<div v-for="item in goods">
<div class="show" v-show="item.selected">
<span class="choice" v-bind:class="{'checked':item.checked}" @click="check(item)"></span>
<div ><img v-bind:src="item.image" v-bind:alt="item.alt" class="image"/><span class="text">{{item.name}}</span></div>
<span >{{item.price}}元</span>
<div >
<span v-on:click="changeNum(item,-1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >-</a></span>
<input v-model="item.number" class="output" disabled/>
<span v-on:click="changeNum(item,1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >+</a></span>
</div>
<div >¥{{item.price * item.number}}元</div>
<span class="icon" @click="seen=true"></span>
</div>
</div>
<!--footer-->
<div id="footer">
<span class="choice" v-bind:class="{'checked':checkAllFlag}"></span>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(true)">全选</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(false)">取消全选</a>
<span >Total:¥{{totalAll}}元</span>
<span><button class="count">结 算</button></span>
</div>
<div id="info" v-show="seen">
<p >是否删除该商品?</p><div class="close" @click="seen=false">×</div>
<button class="get" @click="">yes</button><button class="get" @click="seen=false">no</button>
</div>
<div class="shadow" v-show="seen"></div>
</div>
</body>
<script src="./src/vue.min.js"></script>
<script src="./src/vue-resource.min.js"></script>
<script src="shop.js"></script>
</html>
下面的是js的代码:
var vm = new Vue({
el:'#app',
data:{
total: 0,
totalAll: 0,
goods: [],//商品为数组
checkAllFlag: false,
seen: false,
delFlag: true
},
mounted: function () {
this.goodlist();
},
methods:{
//改变商品数量
changeNum:function (item,flag) {
if (flag>0) {
item.number++;
}else{
item.number--;
if(item.number<1){
item.number = 1;
}
}
this.totalMoney();
},
//是否选中
check:function (item) {
if(typeof item.checked == 'undefined'){
this.$set(item,"checked",true);
//局部为item添加“checked”,值为true
}else{
item.checked = !item.checked;
}
this.totalMoney();
},
//通过$http.get方法ajax地交互获取商品信息,一定要引入vue-resource组件
goodlist:function () {
var self = this;
this.$http.get("shop.json").then(function (res) {
self.goods = res.data.result.goods;
},function () {
console.log("failed");
});
},
//是否全选
checkAll:function (flag) {
this.checkAllFlag = flag;
var self = this;
this.goods.forEach(function(value,index){
if(typeof value.checked == 'undefined'){
self.$set(value,"checked",self.checkAllFlag);
}else{
value.checked = self.checkAllFlag;
}
});
this.totalMoney();
},
//结算选中商品的价格
totalMoney:function () {
//初始化总价
this.totalAll = 0;
var self =this;
//通过foreach循环判断是否被选中
this.goods.forEach(function(value,index){
if(value.checked){
self.totalAll += value.price * value.number;
}
});
}
}
})
下面是CSS代码:
*{padding: 0;margin: 0;}
a{text-decoration: none;color: black;}
#app{width: 500px;height: 600px;border: 1px solid;position: absolute;margin-top:20px;margin-left:50px;}
.header{width: 500px;height: 30px;line-height: 30px;background-color: darkmagenta;}
.header span{display: inline-block;width: 50px;height: 30px;}
.show{width: 500px;height: 85px;margin-top: 5px;}
#footer{position: absolute;bottom: 0;width: 500px;height: 50px;background-color: #c7c7c9;}
.output{width: 40px;height: 20px;}
.image{width: 60px;height: 80px;float:left;}
.choice{display: inline-block;width: 15px;height: 15px;border-radius: 15px;border: 1px solid;float: left;margin-top: 30px;margin-left: 20px;}
.checked{background-color: darkorange;}
.icon{background-image: url(del.png);display: inline-block;width: 30px;height: 30px;margin-left: 50px;margin-top: 20px;}
.text{display:inline-block;width:50px;height:20px;line-height:20px;font:12px;margin-top:20px;margin-left:5px;float:left;}
.count{width:100px;height:40px;background-color:red;line-height:40px;font-size:16px;margin-left:40px;margin-top:5px;}
#footer a{display:inline-block;margin-left:5px;height:22px;}
#info{width:250px;height:100px;position:absolute;border:1px solid;margin-top:-250px;margin-left:120px;background-color:#c7c7c9;text-align:center;z-index:999;}
.get{width:80px;height:30px;font:17px;margin-top:10px;}
.shadow{width:100%;height:100%;background-color:black;opacity:0.8;margin-top:-480px;z-index:1;}
.close{position:absolute;right:2px;top:-5px;cursor:pointer;}
下面是json代码:
{
"status":1,
"result":{
"total":50,
"goods":[
{
"name":"香烟",
"price":15,
"number":1,
"selected": true,
"image": "./img/xiangyan.jpg",
"alt": "香烟"
},
{
"name": "啤酒",
"price": 12,
"number": 1,
"selected": true,
"image": "./img/pjiu.jpg",
"alt": "啤酒"
},
{
"name": "打火机",
"price": 2,
"number": 1,
"selected": true,
"image": "./img/fire.jpg",
"alt": "打火机"
},
{
"name": "鸡腿",
"price": 5,
"number": 1,
"selected": true,
"image": "./img/chick.jpg",
"alt": "鸡腿"
},
{
"name": "垃圾袋",
"price": 8,
"number": 1,
"selected": true,
"image": "./img/bush.jpg",
"alt": "垃圾袋"
}
]
},
"message":""
}
实现的结果如下图:
以上是“vue怎么实现的仿淘宝购物车功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。