使用cdn引入vue+ajax实现简单的商城页面

页面呈现效果：

index.html页面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>商品页面</title><link rel="stylesheet" href="../css/index.css"><!-- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">--> </head><body><div id="itemWrap" class="itemwrap"><!-- 人气主动打榜 --><div class="mainWrap"><p class="mainTitle mainTitlePadding">人气主打榜</p><div class="mainContent mainBorder"><div class="icon"><img src="../img/icon.png" alt=""><span class="mainHotText">TOP1</span></div><div class="contextWrap"><span class="ageText">0-7岁</span><p class="mainItemstitle">{{mainItems.name}} {{mainItems.style}}</p><p><span class="monIcon">￥</span><span class="mainItemsSale">{{mainItems.sales}}</span><span class="mainItemPrice">{{mainItems.price}}</span></p></div><img class="mainItemsPic" src="../img/showstop.jpg" alt=""></div></div><!-- 新品上市 --><div class="mainWrap"><p class="mainTitle newsTitlePadding">新品上市</p><div class="clearUl newsContent"><div class="Item" v-for="item in newItems"><div class="showsWrap"><div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div><div class="HotIcon"><span class="hotText">HOT</span></div></div><p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p><div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div><div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div></div></div></div><!-- TOP推荐 --><div class="mainWrap"><p class="mainTitle newsTitlePadding">TOP推荐</p><div class="clearUl topContent"><div class="Item" v-for="item in topItems"><div class="showsW"><div class="showsWrap"><div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div><div class="HotIcon"><span class="hotText">HOT</span></div></div></div><p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p><div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div><div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div></div></div></div><!-- 经典必备 --><div class="mainWrap"><p class="mainTitle newsTitlePadding">经典必备</p><div class="clearUl classContent"><div class="Item" v-for="item in classicItems"><div class="showsW"><div class="showsWrap"><div class="box"><span class="SaveTitle">立省</span><span class="SavePirce">60</span><span class="Unit">元</span></div><div class="HotIcon"><span class="hotText">HOT</span></div></div></div><p class="showTitle"><span>{{item.series}}</span> <span>{{item.name}}</span> <span>{{item.style}}</span></p><div class="priceWrap"><span class="priceTitle">吊牌价</span><span class="monIcon MonCol">￥</span><span class="price">{{item.price}}</span><span class="saleTitle">活动价</span><span class="monIcon SMonCol">￥</span><span class="salePrice">{{item.sales}}</span></div><div class="itemNoWrap"><span>货号:</span><span>{{item.itemNo}}</span></div></div></div></div></div><script src="../js/jquery3.4.1.js"></script><script src="../js/vue.js"></script><script src="../js/index.js"></script></body>
</html>

json页面

{"mainItems":[{"name":"包头凉鞋","style":"抽绳设计","price":"￥329","sales":"189-239"}],"newItems":[{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}],"topItems":[{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}],"classicItems":[{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"},{"name":"凉鞋","series":"750系列","style":"中性款","price":339,"sales":339,"itemNo":"SDL750pK"}]
}

css页面

*{margin: 0;padding: 0;
}
.itemwrap{width:750px;height: 2000px;margin: 0 auto;background: #fff;
}
.mainWrap{width: 100%;
}
.mainTitle{width: 100%;height: 32px;font-family: SourceHanSansCN-Bold;font-size: 34px;line-height: 21px;letter-spacing: 0px;color: #000000;text-align: center;
}
.mainHotText{font-family: Gotham-Bold;font-size: 18px;line-height: 22px;letter-spacing: 0px;color: #dc2121;font-weight: 600;
}
.mainTitlePadding{padding-top: 70px;padding-bottom: 39px;
}
.mainContent{width: 698px;height:268px ;margin: 0 auto;
}
.mainContent:not(:last-child){margin-bottom: 20px;
}
.mainBorder{border: 1px solid #dcdcdc;
}
.icon{width: 82px;border-right: 1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;padding:7px 8px;
}
.contextWrap{margin-top: 72px;margin-left: 83px;width: auto;float: left;
}
.ageText{padding:3px 19px ;border: solid 1px #282828;font-family: Gotham-Medium;font-size: 18px;letter-spacing: 0px;color: #1c1615;
}
.mainItemstitle{font-family: SourceHanSansCN-Medium;font-size: 30px;letter-spacing: 0px;color: #000000;margin-top: 23px;margin-bottom: 17px;
}
.monIcon{font-size: 17px;line-height: 8px;letter-spacing: -1px;color: #000000;
}
.mainItemsSale{font-family: Gotham-Bold;font-size: 36px;letter-spacing: -1px;color: #000000;
}
.mainItemPrice{font-family: SourceHanSansCN-Medium;font-size: 17px;line-height: 8px;letter-spacing: -1px;color: #000000;opacity: 0.4;margin-left: 14px;text-decoration:line-through
}
.mainItemsPic{margin-right: 40px;display: inline-block;float: right;
}
/* news页面 */
.newsContent{width: 700px;margin: 0 auto;overflow: hidden;
}
.newsTitlePadding{padding-top: 57px;padding-bottom:42px ;
}
.clearUl{list-style: none;overflow: hidden
}
.newsContent .Item{width:339px;height:425px;border: 1px solid #dcdcdc;float: left;
}
.newsContent .hotText{display: inline-block;font-family: Gotham-Bold;font-size: 18px;font-style: italic;line-height: 18px;letter-spacing: -1px;color: #1c1615;margin-top: 23px;margin-left: 10px;font-weight: 600;}
.newsContent .Item:nth-child(odd) {margin-right: 18px;margin-bottom: 20px;
}
.newsContent .showsWrap{background:url(../img/show2.jpg) center no-repeat;background-size: cover;height:339px;width: 339px;
}.newsContent .SaveTitle{font-family: SourceHanSansCN-Medium;font-size: 24px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.newsContent .SavePirce{font-family: Gotham-Bold;font-size: 38px;font-style: italic;letter-spacing: -1px;color: #cf0a2c;padding: 0 1px;margin-top: 17px;display: inline-block;padding: 0 2px;
}
.newsContent .Unit{font-family: SourceHanSansCN-Medium;font-size: 12px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.newsContent .box{padding-bottom: 0;display: inline-block;margin-left: 20px;
}
.newsContent .HotIcon{margin-top: 25px;float: right;margin-right: 22px;background: url(../img/hot2.png) no-repeat center;background-size: cover;width: 63px;height: 63px;
}
.newsContent .showTitle{margin-top: -59px;font-family: SourceHanSansCN-Medium;font-size: 24px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 1px;color: #1c1615;text-align: center;
}
.newsContent .priceTitle{width: 58px;height: 20px;font-family: SourceHanSansCN-Bold;font-size: 21px;line-height: 18px;letter-spacing: 0px;color: #666666;
}
.newsContent .price{width: 71px;height: 23px;font-family: MyriadPro-Regular;font-size: 21px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #666666;font-size: 31px;
}
.newsContent .MonCol{color: #666666;font-size: 14px;
}
.newsContent .saleTitle{width: 60px;height: 21px;font-family: SourceHanSansCN-Bold;font-size: 21px;line-height: 18px;letter-spacing: 0px;color: #282828;margin-left: 16px;
}
.newsContent .salePrice{width: 73px;height: 25px;font-family: MyriadPro-Regular;font-size: 21px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #cf0a2c;font-size: 31px;
}
.newsContent .SMonCol{color: #cf0a2c;font-size: 14px;
}
.newsContent .priceWrap{margin-top: 22px;text-align: center;margin-top: 22px;padding-bottom: 25px;border-bottom: 1px solid #dcdcdc;
}
.newsContent .itemNoWrap{font-family: SourceHanSansCN-Regular;font-size: 24px;letter-spacing: -1px;color: #666666;text-align: center;margin-top: 12px;
}
.topContent{width: 700px;margin: 0 auto;
}
.topContent .Item{width: 225px;border: 1px solid #dcdcdc;float: left;
}
.topContent .Item:nth-child(3n-1) {margin:0 9.5px;
}
.topContent .Item:nth-child(3n) {margin-bottom: 15px;
}
.topContent .showsW{width: 225px;height: 225px;
}
.topContent .showsWrap{background: url(../img/show2.jpg) center no-repeat;background-size: cover;height: 100%;width:100%;
}.topContent .SaveTitle{font-family: SourceHanSansCN-Medium;font-size: 16px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.topContent .SavePirce{font-family: Gotham-Bold;font-size: 25px;font-style: italic;letter-spacing: -1px;color: #cf0a2c;padding: 0 1px;margin-top: 17px;display: inline-block;
}
.topContent .Unit{font-family: SourceHanSansCN-Medium;font-size: 12px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.topContent .box{padding-bottom: 0;display: inline-block;margin-left: 20px;
}
.topContent .HotIcon{margin-top: 25px;float: right;margin-right: 22px;background: url(../img/hot2.png) no-repeat center;background-size: cover;width: 41px;height: 41px;}
.topContent .hotText{display: inline-block;font-family: Gotham-Bold;font-size: 12px;font-style: italic;line-height: 18px;letter-spacing: -1px;color: #1c1615;margin-top: 12px;margin-left: 6px;font-weight: 600;}
.topContent .showTitle{margin-top: -47px;font-family: SourceHanSansCN-Medium;font-size: 18px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 1px;color: #1c1615;text-align: center;
}
.topContent .priceTitle{width: 58px;height: 20px;font-family: SourceHanSansCN-Bold;font-size: 14px;line-height: 18px;letter-spacing: 0px;color: #666666;
}
.topContent .price{width: 71px;height: 23px;font-family: MyriadPro-Regular;font-size: 21px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #666666;
}
.topContent .MonCol{color: #666666;font-size: 14px;
}
.topContent .saleTitle{width: 60px;height: 14px;font-family: SourceHanSansCN-Bold;line-height: 18px;letter-spacing: 0px;color: #282828;margin-left: 16px;
}
.topContent .salePrice{width: 73px;height: 25px;font-family: MyriadPro-Regular;font-size: 21px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #cf0a2c;
}
.topContent .SMonCol{color: #cf0a2c;font-size: 14px;
}
.topContent .priceWrap{text-align: center;margin-top: 10px;padding-bottom: 14px;border-bottom: 1px solid #dcdcdc;
}
.topContent .itemNoWrap{font-family: SourceHanSansCN-Regular;font-size: 16px;letter-spacing: -1px;color: #666666;text-align: center;margin: 8px 0;
}
.topTitlePadding{margin: 20px;
}
.classContent{width: 700px;margin: 0 auto;
}
.classContent .Item{width: 168px;border: 1px solid #dcdcdc;float: left;
}.classContent .Item:not(:nth-child(4n+1)) {margin-left:6.33px;
}
.classContent .Item:nth-child(4n){margin-bottom: 10px;
}
.classContent .showsW{width: 168px;height: 168px;
}
.classContent .showsWrap{background: url(../img/show2.jpg) center no-repeat;background-size: cover;height: 100%;width:100%;
}.classContent .SaveTitle{font-family: SourceHanSansCN-Medium;font-size: 12px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.classContent .SavePirce{font-family: Gotham-Bold;font-size: 19px;font-style: italic;letter-spacing: -1px;color: #cf0a2c;padding: 0 1px;margin-top: 13px;display: inline-block;
}
.classContent .Unit{font-family: SourceHanSansCN-Medium;font-size: 9px;font-style: italic;letter-spacing: 0px;color: #212121;
}
.classContent .box{padding-bottom: 0;display: inline-block;margin-left: 20px;
}
.classContent .HotIcon{margin-top: 12px;float: right;margin-right: 11px;background: url(../img/hot2.png) no-repeat center;background-size: cover;width: 35px;height: 35px;
}
.classContent .hotText{display: inline-block;font-family: Gotham-Bold;font-size: 1px;font-style: italic;line-height: 18px;letter-spacing: -1px;color: #1c1615;margin-top: 8px;margin-left: 3px;font-weight: 600;}
.classContent .showTitle{margin-top: -39px;font-family: SourceHanSansCN-Medium;font-size: 12px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 1px;color: #1c1615;text-align: center;
}
.classContent .priceTitle{width: 58px;height: 20px;font-family: SourceHanSansCN-Bold;font-size: 10px;line-height: 18px;letter-spacing: 0px;color: #666666;
}
.classContent .price{width: 71px;height: 23px;font-family: MyriadPro-Regular;font-size: 16px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #666666;
}
.classContent .MonCol{color: #666666;font-size: 14px;
}
.classContent .saleTitle{width: 60px;height: 14px;font-family: SourceHanSansCN-Bold;line-height: 18px;letter-spacing: 0px;color: #282828;margin-left: 7px;font-size: 10px;
}
.classContent .salePrice{width: 73px;height: 25px;font-family: MyriadPro-Regular;font-size: 16px;font-weight: normal;font-stretch: normal;line-height: 18px;letter-spacing: 0px;color: #cf0a2c;
}
.classContent .SMonCol{color: #cf0a2c;font-size: 14px;
}
.classContent .priceWrap{text-align: center;padding-bottom: 11px;border-bottom: 1px solid #dcdcdc;
}
.classContent .itemNoWrap{font-family: SourceHanSansCN-Regular;font-size: 12px;letter-spacing: -1px;color: #666666;text-align: center;margin: 6px 0;
}
.classTitlePadding{margin: 20px;
}

js页面

var vm =new Vue({el:'#itemWrap',data(){return{mainItems:{},newItems:[],topItems:[],classicItems:[]}},created() {this.getItem();},methods:{getItem:function () {$.ajax({type:'get',url:"../js/cargos.json",dataType:"json",success:(data)=>{this.mainItems = data.mainItems[0];this.newItems =data.newItems;this.topItems=data.topItems;this.classicItems=data.classicItems;},}) }}
})

使用cdn引入vue+ajax实现简单的商城页面相关推荐

vue做个简单的系统通知页面思路
简单的系统通知页面写法消息通知页面: 通过定时器定时请求,拿到数据然后加到一个数组内,页面上循环数组渲染, 这样定时请求到新数据就放进数组页面也多一个通知,加个判断看数组内是否有一样的, 如果有就不 ...
AJAX实现简单的注册页面异步请求
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...
使用Vue.js搭建简单的表格页面
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>我 ...
Vue实现一个简单的登录页面【自定义】
创建一个自定义插件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证
大家都知道Ajax并不是一项新的发明技术,它的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).我们在使用html表单提交页面时,会有一 ...
【Vue】ElementUI、ECharts使用 cdn引入
[Vue]ElementUI.ECharts使用 cdn引入文章目录 [Vue]ElementUI.ECharts使用 cdn引入 1.修改 `public/index.html`: 2.vue.c ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
vue-cli cdn方式引入Vue模块
文章目录 vue-cli cdn 方式引入 Vue 模块前言选择 Vue 的 cdn 如何引入 cdn ? 一手插入一手准备小结 + 打包测试快速配置篇 FAQ 是否需要删除 import ...
vue cdn引入第三方依赖
第一步 index.html中: //最好放到head里面 <head>  <link rel="stylesheet" h ...

使用cdn引入vue+ajax实现简单的商城页面

使用cdn引入vue+ajax实现简单的商城页面相关推荐

最新文章

热门文章