當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?

發(fā)布時(shí)間：2024/3/24 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果? 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

總結(jié):之前一直未寫過同時(shí)實(shí)現(xiàn)跳轉(zhuǎn)當(dāng)前頁面和跳轉(zhuǎn)新頁面的項(xiàng)目,要么是當(dāng)前，要么是新頁面,今天更新一個(gè)兩個(gè)同時(shí)實(shí)現(xiàn)的項(xiàng)目。
：相信很多人都遇到過router-link通過to跳轉(zhuǎn)頁面有時(shí)候會不顯示內(nèi)容的bug。

上傳不了完整效果圖視頻.請見諒哈.

直接上代碼:（完整代碼）
效果圖:（實(shí)現(xiàn)效果可直接復(fù)制粘貼）

主頁面：

導(dǎo)航條：超級周末頁面

購物車頁面:

大額券頁面:

其它我就省略了…

功能描述:
1.仿美團(tuán)導(dǎo)航切換功能
2.淘寶購物車功能，加入購物車，加購功能,
3.輪播圖效果
4.循環(huán)遍歷路由導(dǎo)航功能，通過id跳轉(zhuǎn)

1.app.vue

<template><div id="app"><router-view></router-view></div> </template><script> import helloworld from './components/HelloWorld' export default {name: 'App',components: {helloworld} } </script><style> * {margin: 0;padding: 0; } ul, li {list-style: none; } #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50; } body {background-color: #ccc; } .sp2 {float: left;height: 2rem;line-height: 2rem;padding-left: 5%;font-size: 23px; } .hcc {display: inline-block;font-size: 1rem; } .fl{float: left; } .fr{float: right; } </style>

2.index.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>nvue</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2199259_fejd027pf36.css"></head><body><div id="app"></div></body> </html>

3.router下的index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import addlist from '@/components/addlist' import qiehuan from '@/components/qiehuan' import top from '@/components/top' import news from '@/components/news' import Large from '@/components/Large' import Favorite from '@/components/Favorite' import Hotevents from '@/components/Hotevents' import Novice from '@/components/Novice' import goshop from '@/components/goshop' import More from '@/components/More' import BaseListb from '@/components/BaseListb' import payment from '@/components/payment'Vue.use(Router)//全局路由export default new Router({routes: [{path: '/',component: HelloWorld,redirect:'/HelloWorld/Guess'},{path: '/top',component: top},{path: '/news',component: news},{path: '/Large',component: Large},{path: '/Favorite',component: Favorite},{path: '/Novice',component: Novice},{path: '/Hotevents',component: Hotevents},{path: '/gohshop/:pid',component: goshop,name:'goshop'},{path: '/More/:ipid',component: More,name:'More'},{path: '/BaseListb',component: BaseListb,name:'BaseListb'},{path: '/payment',component:payment,name:'payment'},{path: '/HelloWorld',name: 'HelloWorld',redirect:'/HelloWorld/Guess', //重定向:默認(rèn)頁面//這個(gè)是關(guān)鍵哦component: resolve => require(['@/components/HelloWorld'], resolve),children: [{//apath: 'Guess',component: resolve => require(['@/page/Guess'], resolve),//路由懶加載},{//bpath: 'weekend',component: resolve => require(['@/page/weekend'], resolve),},{//cpath: 'Special',component: resolve => require(['@/page/Special'], resolve),},{//dpath: 'Goodshop',component: resolve => require(['@/page/Goodshop'], resolve),},]},{path: '/*',component: HelloWorld},//通用符號],mode:"history"})

4.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 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(VueAwesomeSwiper); Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({//根實(shí)例el: '#app',router,store,//注冊components: { App },template: '<App/>' })

5.helloworld.vue

<template><div class="hello"><top :flag="true"><i class="iconfont icon-shouyeshouye sp2"></i><h3 class="hcc">我的網(wǎng)站</h3></top><div class="swp"><Swiper :swiperImgs="bannerlist"></Swiper></div><div class="fl-div"><ul class="uls"><router-link tag="li" to="/news"><span></span><span>今日更新</span></router-link><router-link tag="li" to="/Large"><span></span><span>大額券</span></router-link><router-link tag="li" to="/Favorite"><span></span><span>收藏夾</span></router-link><router-link tag="li" to="/Hotevents"><span></span><span>熱門活動(dòng)</span></router-link><router-link tag="li" to="/Novice"><span></span><span>新手上路</span></router-link></ul><slot></slot></div><div class="h_b"><ul class="ull"><router-link to="/HelloWorld/Guess" tag="li"><div class="children">猜你喜歡</div></router-link><router-link to="/HelloWorld/weekend" tag="li"><div class="children">超級周末</div></router-link><router-link to="/HelloWorld/Special" tag="li"><div class="children">今日特價(jià)</div></router-link><router-link to="/HelloWorld/Goodshop" tag="li"><div class="children">發(fā)現(xiàn)好店</div></router-link></ul><router-view></router-view></div></div> </template><script> import top from './top'//頭部 import Swiper from '../base/Swiper'//輪播 // 因?yàn)橛米兞繉?dǎo)出，所以引入的時(shí)候必須用對象來引入{導(dǎo)出的}地址 import { getBanner, getHotList } from '../api/index' //引入cookie查找 import Cookies from 'js-cookie' import Guess from '../page/Guess' export default {name: 'HelloWorld',data () {return {bannerlist: [],//接收數(shù)據(jù)}},components: {top: top,Swiper, Guess},created () {this.getb();},methods: {clickltem: function (path) {this.$router.push(path);},getb () {return getBanner().then((res) => {this.bannerlist = res.banner;})}} } </script> <style scoped lang="less"> .hello {width: 100%;//swiper.swp {width: 100%;margin: 2.1rem 0 0 0;font-size: 0.1rem;}//導(dǎo)航條一.fl-div {margin-top: 0.1rem;ul {display: flex;display: -webkit-flex;background-color: white;height: 6rem;li {width: 25%;span {display: block;font-size: 12px;}span:nth-of-type(1) {height: 4rem;line-height: 4rem;background-color: #ccc;margin: 0.2rem;border-radius: 1rem;}span:nth-of-type(2) {height: 1rem;line-height: 1rem;text-align: center;}}}.router-link-exact-active {color: #ff5700;}}//導(dǎo)航條二.h_b {.ull {border-top: 0.01rem solid #000;list-style-type: none;padding: 0;left: 0;height: 44px;line-height: 44px;display: flex;-webkit-display: flex;width: 100%;background-color: white;li {flex: 1;font-size: 0.7rem;font-weight: 600;.children{border-bottom:.01rem solid #ccc;} }.lis {border: 0.01rem solid orange;}.router-link-exact-active {color: red;} }}//jieshu } </style>

6.goshop.vue

<template><div class="goshop"><top :flag="true" class="cc"><i class="iconfont icon-fanhui sp2" @click="golist"></i></top><div class="g_c"><p class="p_top"><img :src="booklist.image" :alt="booklist.image"></p><div class="uls mc"><p class="p1">女神價(jià)</p><p class="p2"><span class="s1">{{booklist.price|sumA| sumB('￥')}}</span><span class="s2">價(jià)格{{booklist.prices| sumB('￥')}}</span></p><div class="fl-p3"><p>淘金幣可抵4.4元起</p><p>查看></p></div><p class="p4">{{booklist.fo}}</p><div class="ul_p"><p><i class="iconfont icon-shoucang"></i><span>推薦</span></p><p><i class="iconfont icon-qicheqianlian-"></i><span>幫我選</span></p><p><i class="iconfont icon-42"></i><span>分享</span></p></div></div><div class="uls_1 mc"><div class="dd"><p class="p1"><span>選擇</span><span>規(guī)格分類/大/中/小</span><span class="ct">></span></p><div class="p2"><div class="p_le"></div><div class="p_tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"><img :src="booklist.image" :alt="booklist.image" class="tu"></div><div class="lei_xing">共6種款式類型可選</div></div></div><div class="dd tt"><p class="p1"><span>發(fā)貨</span><span>江蘇南通 |快遞:快遞包郵</span><span class="ct">月銷{{booklist.price}}></span></p><div class="dt"><div class="t1"></div><div class="t2">配送至: 北京良鄉(xiāng) 拱辰</div></div></div><div class="dd"><p class="p1"><span>保障</span><span>付款后48小時(shí)內(nèi)發(fā)貨 ' 15天退貨</span><span class="ct">></span></p></div><div class="dd"><p class="p1"><span>參數(shù)</span><span>品牌材質(zhì)...</span><span class="ct">></span></p></div></div><div class="uls_2 mc"><p class="l1"><span>寶貝評價(jià)(196)</span><span>查看全部></span></p><p class="moxing l2"><span>質(zhì)量好({{booklist.price}})</span><span>材質(zhì)好({{booklist.prices}})</span><span>樣式好看({{booklist.price}})</span><span></span></p><div class="tou_xiang"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_right"><p>t**5</p><p>11天前</p></div></div><p class="ping_jia">圖案很好看</p><div class="tou_xiang"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_right"><p>t**5</p><p>19天前</p></div></div><p class="ping_jia br">收到后就打開看看,質(zhì)量很好，非常喜歡,還有再來買。</p><div class="mai_jia moxing"><p>買家秀({{booklist.price}})</p><p>查看全部></p></div><div class="moxing tu_pian"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"><img :src="booklist.image" :alt="booklist.image"></div><div class="mai_jia moxing"><p>問大家</p><p>查看全部></p></div><div class="moxing ping_jia col"><p><span>問</span>質(zhì)量會不會很差</p><p>2個(gè)回答</p></div><div class="moxing ping_jia col"><p><span>問</span>會很亮嗎?</p><p>2個(gè)回答</p></div></div><div class="uls_3 mc"><div class="u3_top moxing"><div class="tou_left"><img :src="booklist.image" :alt="booklist.image"></div><div class="tou_center"><p>時(shí)尚家居品質(zhì)無憂</p><p><i class="iconfont icon-shoucang"></i><i class="iconfont icon-shoucang"></i></p></div><div class="tou_right"><p>寶貝描述4.8<span class="ct">平</span></p><p>賣家服務(wù)4.8<span class="ct">平</span></p><p>物流服務(wù)4.8<span class="ct">平</span></p></div></div><div class="u3_center moxing"><p><span>進(jìn)店逛逛</span> </p><p><span>全部寶貝</span></p></div><div class="u3_bottom"><div class="tp moxing"><p>店鋪推薦</p><p>查看全部></p></div><ul class="u3_uls"><li v-for="(item,index) of getlist" :key="index"><p class="p1"><img :src="item.image" :alt="item.image"></p><p class="p2">{{item.fo}}</p><p class="p3">{{item.price|sumA| sumB('￥')}}</p></li></ul></div></div></div><div class="a_bottom"><button class="btn btn1" @click="addshop(booklist.index)">加入購物車</button><router-link to="/More/123" tag="button" class="btn btn2">立即購買</router-link><router-link to="/"><i class="iconfont icon-kefu1 c1"><h6>客服</h6></i> </router-link><router-link to="/More/123"><i class="iconfont icon-qicheqianlian- c2"> <p class="toying" v-show="flag">1</p><h6>購物車</h6></i> </router-link><slot></slot></div></div> </template><script> import top from '../components/top' import { getHotList } from '../api/index.js' import Cookies from 'js-cookie' //js-cookie可以存數(shù)據(jù),也可刪除數(shù)據(jù) export default {name: 'goshop',data () {return {booklist: [],//存數(shù)據(jù)1getlist: [],//存數(shù)據(jù)2flag: false//默認(rèn)false}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.getb();this.geth();//獲取當(dāng)前數(shù)據(jù)},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getHotList().then((res) => {this.booklist = res.hotlist[this.$route.params.pid];console.log(this.booklist)})},geth () {return getHotList().then((res) => {this.getlist = res.hotlist;console.log(this.getlist)})},//購物車用cookie獲取數(shù)據(jù)，要下載npm install js-cookieaddshop(pid){//購物車的定義方法this.flag = true;//定義一個(gè)變量let shoplist=Cookies.get('shoplist');//get獲取到這個(gè)方法let ary={};//定義對象if(shoplist){ary=JSON.parse(shoplist);//ary獲取買的東西=轉(zhuǎn)字符串對象console.log(ary);if(ary[pid]){//對象包括數(shù)字就成了{(lán)""}ary[pid]+=1;//買過了，又買了}else{ary[pid]=1;//買過了，這是第一次買}}else{//沒有買ary[pid]=1;//當(dāng)前是數(shù)組轉(zhuǎn)字符串[括起來]}Cookies.set('shoplist',JSON.stringify(ary));}},components: {top} } </script><style scoped lang="less"> .goshop {width: 100%;.iconfint {color: white;}.cc {background-color: rgba(126, 122, 122, 0.7);color: whitesmoke;}.g_c {margin-top: 2.3rem;.moxing {display: -webkit-flex;display: flex;justify-content: space-between;}.p_top {height: 50%;img {width: 100%;height: 100%;}}//以下是公共樣式mc.ct.moxing.mc {margin: 0.3rem;padding: 0.4rem;background-color: white;border-radius: 0.6rem;}.ct {color: #ccc;}//以上是公共樣式.uls {.p1 {width: 100%;text-align: left;font-size: 0.7rem;color: tomato;}.p2 {width: 100%;text-align: left;margin-top: 0.2rem;.s1 {font-size: 1.2rem;color: tomato;}.s2 {text-decoration: line-through;padding-left: 0.3rem;font-size: 0.7rem;}}.fl-p3 {width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;font-size: 0.7rem;color: tomato;margin-top: 0.2rem;p:nth-of-type(1) {background-color: rgba(224, 15, 15, 0.2);padding: 0.1rem;border-radius: 2%;}}.p4 {margin-top: 0.2rem;width: 100%;text-align: left;font-size: 0.9rem;font-weight: bold;}.ul_p {color: #ccc;margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;p:nth-of-type(1),p:nth-of-type(2),p:nth-of-type(3) {width: 33.33333%;text-align: center;span {font-size: 0.8rem;padding-left: 0.2rem;}}}}.uls_1 {.dd {margin-top: 0.3rem;.p1 {width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;font-size: 0.7rem;span:nth-of-type(1) {width: 12%;color: #ccc;text-align: left;}span:nth-of-type(2) {width: 68%;text-align: left;}span:nth-of-type(3) {width: 20%;text-align: right;}}.p2 {margin-top: 0.2rem;display: flex;display: -webkit-flex;justify-content: space-between;.p_le {width: 10%;}.p_tu {.tu {display: inline-block;width: 2rem;height: 2rem;line-height: 2rem;}}.lei_xing {width: 40%;height: 2rem;line-height: 2rem;font-size: 0.7rem;border-radius: 0.5rem;background-color: rgba(184, 176, 176, 0.192);}}}.tt {.dt {margin-top: 0.2rem;width: 100%;display: -webkit-flex;display: flex;justify-content: space-between;.t1 {width: 13%;}.t2 {width: 87%;text-align: left;font-size: 0.7rem;color: #ccc;}}}}.uls_2 {.l1 {display: -webkit-flex;display: flex;justify-content: space-between;span:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}span:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.l2 {margin-top: 0.6rem;span {width: 25%;font-size: 0.5rem;}span:nth-of-type(1),span:nth-of-type(2),span:nth-of-type(3) {display: inline-block;background-color: thistle;margin-right: 0.1rem;text-align: center;}}.tou_xiang {margin-top: 0.6rem;display: -webkit-flex;display: flex;flex: 1;.tou_left {width: 10%;img {// display:block;width: 100%;height: 100%;border-radius: 50%;}}.tou_right {width: 80%;p {width: 100%;padding-left: 0.3rem;}p:nth-of-type(1) {width: 100%;text-align: left;}p:nth-of-type(2) {margin-top: 0;text-align: left;font-size: 0.6rem;color: #ccc;}}}.ping_jia {width: 100%;text-align: left;font-size: 0.6rem;margin-top: 0.6rem;}.br {padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;}.mai_jia {padding-top: 1rem;p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.tu_pian {padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;img {margin: 1rem 0.1rem 0 0.1rem;width: 24%;border-radius: 0.5rem;}}.col {p:nth-of-type(1) {span:nth-of-type(1) {background-color: tomato;color: white;padding: 0.1rem;margin-right: 0.1rem;}}p:nth-of-type(2) {color: #ccc;}}}.uls_3 {.u3_top {.tou_left {width: 15%;img {width: 100%;height: 100%;border-radius: 0.5rem;}}.tou_center {p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {text-align: left;line-height: 2rem;}}.tou_right {p {font-size: 0.4rem;height: 1rem;}}}.u3_center {margin-top: 1rem;padding-bottom: 1rem;border-bottom: 0.01rem solid #ccc;p {width: 50%;span {font-size: 0.6rem;width: 100%;height: 1rem;line-height: 1rem;color: tomato;border-radius: 0.6rem;border: 0.01rem solid tomato;padding: 0.1rem 0.2rem;margin-left: 0.4rem;}}p:nth-of-type(1) {text-align: right;}p:nth-of-type(2) {text-align: left;}}.u3_bottom {margin: 1rem 0;.tp {p:nth-of-type(1) {font-size: 0.9rem;font-weight: bold;}p:nth-of-type(2) {font-size: 0.7rem;color: tomato;}}.u3_uls {display: -webkit-flex;display: flex;flex-wrap: wrap;padding: 1rem 0 0 0;li {width: 33.333%;.p1 {padding: 0 0.1rem;img {width: 100%;height: 100%;border-radius: 0.6rem;border: 0.01rem solid #ccc;}}.p2 {width: 100%;text-align: left;font-size: 0.6rem;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.p3 {width: 100%;text-align: left;font-size: 1.1rem;color: tomato;}}}}}}//購物車.a_bottom{width: 100%;height: 42px;position: fixed;bottom: 0;display: flex;background-color:white;.btn{position: absolute;width: 35%;line-height: 35px;background: #dbe9f6;border: 0;outline: none;font-size: 14px;bottom:0;}.btn1{right: 35%;color: #4891e0;}.btn2{right: 0;color:white;background-color: #4891e0;}a{margin: 5px 0px 0px 20px;}.iconfont{font-size: 20px;color: #999;position: absolute;bottom:0;}.c1{left: 5%;}.c2{left: 17%;text-align: center;}.toying{position: absolute;top: 0%;right: 0%;width: 10px;height: 10px;line-height: 10px;border-radius: 50px;text-align: center;background: red;font-size: 6px;color: white;}h6{font-size: 12px; } } } </style>

7.baselistb.vue

<template><div class="baselistb"><ul><li v-for="(items,index) in list" :key="index" class="bac" @click="golist(items)"><img :src="items.image" :alt="items.image"><div><p>{{items.fo}}</p><span class="nowrop">{{items.bookInfo}}</span><p class="price">{{items.price |sumA | sumB('￥') }}</p></div></li></ul></div> </template><script> export default {name: 'BaseListb',props: ["list"],filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);//在括號內(nèi)可以添加要保留的個(gè)數(shù)(n)},sumB: function (price, char) {return char + price}},methods: {golist (items) {this.$router.push({ name: 'goshop', params: { pid: items.index } })// this.$emit("jiagou",{// ipid:items// })}}} </script> <style scoped lang="less"> .baselistb {ul {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom:3rem;padding-bottom:1rem;li {margin: 0.1rem 2%;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom: 1px solid #f5f5f5;width: 46%;img {margin: 10%;margin-bottom: 0;width: 80%;}p {margin-left: 10%;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 80%;padding: 5px;color: #232326;font-size: 13px;}.price {color: red;font-size: 15px;text-align: left;}}.bac {background-color: white;}} } </style>

8.more.vue

<template><div class="more"><header class="s_top"><p class="p1"><span>購物車</span><span>管理</span></p></header><div class="mac"></div><div class="s_center" v-if="thisnotshop"><ul><li v-for="(items,index) in shoplist" :key="index"><dl><dt><input type="checkbox" v-model="items.ised" /><img :src="items.image" /></dt><dd><p class="head">{{items.fo}}</p><p class="info">{{items.bookInfo}}</p><div><p class="price fl">{{items.price |sumA |sumB('￥') }}</p><span class="const fr">X {{items.const}}</span></div></dd></dl></li></ul><div class="list"><p class="p1">————————更多精選商品————————</p><baselistb :list="list"></baselistb><div class="shopbtn"><p class="all"><input type="checkbox" v-model="checkall" /> 全選</p><p class="sum"><router-link to="/payment" tag="button" class="btn">結(jié)算</router-link><span class="hj">合計(jì):<span class="price">{{sum | sumA |sumB('￥')}}</span><p>不含運(yùn)費(fèi)</p></span></p></div></div></div><p class="notshoplist" v-else>您還沒有選擇寶貝哦<span @click="golist">(去購買)</span></p></div> </template> <script> import baselistb from '../components/BaseListb'; import { getHotList, getBanner } from '../api/index'; import Cookies from "js-cookie"; export default {name: 'More',data () {return {list: [],//存數(shù)據(jù)2shoplist: [{ getHotList }, { getBanner }],//存數(shù)據(jù)1thisnotshop: false//默認(rèn)未購買}},computed: {//計(jì)算屬性checkall: {//雙向數(shù)據(jù)綁定get () {return this.shoplist.every((item, index) => {return item.ised;});},set (val) {this.shoplist.forEach(element => {element.ised = val;});}},sum: {//數(shù)量相加get () {return this.shoplist.reduce((p, n) => {//if (!n.ised) {return p;}return p + n.price * n.const;}, 0);}}},created () {//初始之后this.getl();//購物車選項(xiàng)this.getm();//購物車未購買項(xiàng)},methods: {//自定義方法jiagou(e){var isT=true;console.log(e.ipid);this.shoplist.forEach(a=>{if(a.index==e.ipid.index){a.const++;isT=false;}})if(isT){this.shoplist.push({...e.ipid,const:1})}},getl () {getHotList(),getBanner().then(res => {var shopc = Cookies.get("shoplist");//判斷是否if (shopc) {this.thisnotshop = true;var ary = JSON.parse(shopc);//轉(zhuǎn)為json對象this.shoplist = res.banner.filter(item => {item.const = ary[item.index];item.ised = true;return ary[item.index];});return;}this.thisnotshop = false;});},getm () {getBanner().then(res => {this.list = res.banner;})},golist(){//返回上一頁this.$router.push('/HelloWorld');}},filters: {//過濾器sumA: function (value) {value = Number(value);return value.toFixed(2);//在括號內(nèi)可以添加要保留的個(gè)數(shù)(n)},sumB: function (price, char) {return char + price}},components: {//注冊組件baselistb,} } </script><style scoped lang="less"> *{margin:0;padding:0; } .more{width: 100%;background-color: #f5f3f3e0;.s_top {position: fixed;top: 0;margin-bottom: 0px;width: 100%;height: 44px;line-height: 44px;z-index: 999;.p1 {display: flex;justify-content: space-between;background-color:tomato;padding: 0 5%;span {color: whitesmoke;}}}//中間.mac {height: 47px;background-color: #f5f3f3e0;}.s_center {li {-webkit-box-shadow: box;box-shadow: box;background: #fff;margin-top: 10px;overflow: hidden;margin: 10px;border-radius: 3%;padding: 10px 10px;dt {width: 35%;float: left;input {width: 18px;height: 18px;background: white;-webkit-appearance: none;border: 1px solid #c9c9c9;border-radius: 50px;outline: none;color: white;}input:checked {background: url('../../static/img/duigoutianchong.png') 0 0 no-repeat;border: none;background-size: 100%;}}img {margin-left: 5%;width: 60%;border-radius: 5px;vertical-align: middle;border: 1px solid #ccc;}dd {float: left;width: 65%;p {padding: 1% 0;text-align: left;}.fl {float: left;}.fr {float: right;}.price {color: tomato;}.const {display: block;border: 1px solid #ccc;border-radius: 10px;padding: 5px;font-size: 14px;}}.head {font-size: 1rem;}.info {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color: #999;font-size: 14px;}}}.list {.p1 {margin: 1.2rem 0;color: #9999;font-size: 0.8rem;text-align: center;}}.shopbtn {position: fixed;display: -webkit-box;display: -ms-flexbox;display: flex;width: 100%;height: 50px;line-height: 50px;bottom: 0;background: #fff;padding: 0 10px;.all {text-align: left;input {margin-top: 2px;width: 14px;height: 14px;background: white;-webkit-appearance: none;border: 1px solid #c9c9c9;border-radius: 50px;outline: none;color: white;}input:checked {background: url(/static/img/duigoutianchong.cd604ba.png) 0 0 no-repeat;border: none;background-size: 100%;}}.sum {font-size: 0.8rem;-webkit-box-flex: 2;-ms-flex: 2;flex: 2;margin: 9px 0;.price {color: tomato;}.btn {width: 42%;height: 100%;line-height: 2px;position: relative;top: -4px;right: 15px;float: right;padding: 18px 30px;border: none;outline: none;background:tomato;color: #fff;font-size: 12px;border-radius: 15px;}}p {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;font-size: 12px;span {float: right;}.hj {line-height: 16px;// margin-top: 11px;margin-right: 20px;p {color: #999;font-size: 10px;}}}}.notshoplist {text-align: center;padding: 30px;} } </style>

9.news.vue

<template><div class="news"><top :flag="true" class="n_t"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3>我的商品</h3></top><div class="n_c"><ul><li v-for="(item,index) of bannerlist" :key="index"><div class="box1"><img :src="item.image" :alt="item.image"></div><div class="box2"><p>{{item.fo}}</p><div class="fenbu"><p class="juan1"><span>券</span><span>10元</span></p><p class="juan2">已售2121萬</p></div><p class="juanh">券后<span class="c1">{{item.price| sumB('￥')}}</span><span class="c2">{{item.yprice|sumA| sumB('￥')}}</span></p><p class="goumai" ><span @click="goback(item)">前往購買></span> </p></div></li></ul></div></div> </template><script> import top from '../components/top' // 1.因?yàn)橛米兞繉?dǎo)出，所以引入的時(shí)候必須用對象來引入{導(dǎo)出的}地址 import { getBanner, getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name: 'news',data () {return {bannerlist: [],//接收數(shù)據(jù)}},filters:{sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB:function(price,char){return char + price}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.bannerlist = res.banner;})},goback (item) {this.$router.push({ name: 'goshop', params: { pid: item.index } })// this.$emit("jiagou",{// ipid:items// })}},components: {top,} } </script> <style scoped lang="less"> .news {.n_c {margin: 2.3rem 0 0 0;ul {li {display: -webkit-flex;display: flex;background-color: white;margin: 0.2rem;padding: 0.4rem;border-radius: 2%;div:nth-of-type(1) {width: 30%;}div:nth-of-type(2) {width: 70%;}.box1 {width:50%;text-align:center;img {width: 97%;height: 100%;}}.box2 {p:nth-of-type(1) {font-size: 10px;text-align: left;color:#000;}.fenbu {width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;font-size: 0.1rem;margin-top: 0.5rem;.juan1 {border: 0.01rem salmon solid;border-radius: .2rem;span:nth-of-type(1) {display: inline-block;width:1rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {display: inline-block;width: 2rem;height: 1rem;line-height: 1rem;color: red;text-align: center;}}.juan2{color:slategrey;font-weight: bold;}}.juanh{margin-top:.4rem;width: 100%;text-align: left;font-size:.7rem;.c1{display: inline-block;font-size: 1rem;padding-left:.1rem;}.c2{text-decoration: line-through}}.goumai{width: 100%;margin-top:.6rem;text-align: right;span:nth-of-type(1){display: inline-block;width:5rem;height: 1rem;line-height: 1rem;background-color: salmon;color:white;font-size: .8rem;text-align: center;border-radius: .3rem;padding:.1rem;}}}}}} } </style>

10.novice.vue

<template><div class="novice"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">新手上路</h3></top><div class="n_c"><ul><li v-for="(item,index) of booklist" :key="index"><router-link to="/">{{item.name}}{{item.fo}}</router-link></li></ul></div></div> </template><script> import top from '../components/top' export default {name: 'Novice',data () {return {booklist: [{ name: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'0' },{ name: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'1' },{ name: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'2' },{ name: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'3' },{ name: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'4' }]}},created () {//初始之后// this.getb();// this.booklist;//直接獲取自定義內(nèi)容},methods: {//自定義方法golist () {this.$router.push('/HelloWorld');},getb () {// return this.function().then((res) => {// this.booklist = res.booklist;// })}},components: {top,} } </script><style scoped lang="less"> .novice {.n_c {margin-top: 2.3rem;ul {li {display: flex;display: -webkit-flex;margin: 1%;background-color: white;border-radius: 0.1rem;padding: 0.5rem;font-size: 0.4rem;justify-content: space-between;}}.router-link-exact-active {background: #ff5700;}} } </style>

11.payment.vue

<template><div class="payment"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="prev()" ></i><h3 class="hcc">支付頁面</h3></top><div class="p_conent"><p>支付成功 <span class="ment" @click="golist">(去逛逛)</span></p></div></div> </template><script> import top from '../components/top' import Cookies from 'js-cookie';//第三方插件 export default {name:'payment',created(){//初始之后//引入cookie和支付成功刪除cookie記錄Cookies.remove('shoplist');//刪除hotlist記錄},methods: {golist(){this.$router.push('/HelloWorld');},prev () {this.$router.go(-1)}},components: {top,} } </script><style scoped lang="less"> .payment{.p_conent{margin-top:2.3rem;p{height: 10rem;line-height: 10rem;.ment{color:tomato;}}} }</style>

12.top.vue

<template><div class="top"><span v-if="flag" class="iconfont icon-sousuo sp1" @click='goback'></span><slot>默認(rèn)</slot></div> </template><script> export default {name: 'top',props: {flag: {type: Boolean,//類型布爾值default: false//默認(rèn)false }},methods: {goback () {this.$router.back();//返回上一頁}} } </script><style scoped lang="less"> .top {position: fixed;top:0;right:0;width:100%;height: 2rem;line-height: 2rem;background-color: white;border:.01rem solid #ccc;color:#2c3e50;.sp1{float: right;height: 2rem;line-height: 2rem;padding-right: 5%;font-size: 23px;} } </style>

13.hotevents.vue

<template><div class="hotevents"><div class="h_t"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">熱門活動(dòng)</h3></top></div><div class="h_c"><ul><li v-for="(item,index) of booklist" :key="index"><p class="p1">天貓超市降爆款天天搶,還有更多五折包郵商品呦！</p><p class="p2">有效時(shí)間:<span>2019-04-01</span>至 <span>2019-04-30</span></p><div class="p3"><img :src="item.image" :alt="item.image"></div></li></ul></div></div> </template><script> import top from '../components/top' //引入地址 import { getBanner } from '../api/index' export default {name: 'Hotevents',data () {return {booklist: []//存數(shù)據(jù)}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.booklist = res.banner;})}},components: {top,} } </script><style scoped lang="less"> .hotevents {.h_c {margin-top: 2.3rem;ul {li {background-color: white;margin: 0.2rem;padding: 0.5rem;border-radius: 2%;p {width: 100%;text-align: left;}.p1 {font-weight: 520;}.p2 {font-size: 0.7rem;color: slategrey;}.p3 {width: 100%;img {margin:1%;width: 97%;height: 150px;margin-bottom: 0;}}}}} } </style>

14.large.vue

<template><div class="large"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">商品列表</h3></top><div class="l_c"><ul><li v-for="(items,index) of hotlist" :key="index"><div class="dv1"><img :src="items.image" :alt="items.image"></div><div class="dv2"><p><span class="tb">淘</span>{{items.fo}}</p><div class="jgprice"><p class="p1"><span>券</span><span>{{items.juan}}</span></p><p class="p2">已售2121萬</p></div><p class="coupon">券后<span class="s1">{{items.price| sumB('￥')}}</span><span class="s2">{{items.prices|sumA| sumB('￥')}}</span></p><p class="goum" @click="goback"><span>前往購買></span></p></div></li></ul></div></div> </template> <script> import top from '../components/top' import { getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name: 'Large',data () {return {hotlist: []//存數(shù)據(jù)}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.geth();//獲取當(dāng)前方法},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},geth () {return getHotList().then((res) => {//獲取到定義的api的json數(shù)據(jù)this.hotlist = res.hotlist;})},goback(){alert('購買成功');}},components: {top,} } </script> <style scoped lang="less"> .large {width: 100%;.l_c {margin-top: 2.3rem;ul {li {margin: 0.1rem;background-color: white;border-radius: 0.2rem;padding: 0.3rem;display: flex;display: -webkit-flex;.dv1 {width: 30%;img {width: 91%;height: 100%;border: 1px slategrey dashed;}}.dv2 {width: 70%;p:nth-of-type(1) {width: 100%;text-align: left;font-size: 0.8rem;color: #000;.tb {width: 1rem;height: 1rem;line-height: 1rem;background-color: salmon;padding: 0.1rem;color: white;border-radius: 0.5rem;font-size: 0.7rem;text-align: center;}}}.jgprice {margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;.p1 {width: 100%;span {font-size: 0.6rem;padding: 0.1rem 0.15rem;border: salmon 0.01rem solid;}span:nth-of-type(1) {width: 2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {width: 3rem;height: 1rem;line-height: 1rem;color: salmon;font-weight: 500;}}.p2 {width: 100%;font-size: 0.8rem;text-align: right;color: slategray;font-weight: 600;}}.coupon {margin-top: 0.4rem;width: 100%;text-align: left;font-size: 0.7rem;.s1 {font-size: 1rem;}.s2 {text-decoration: line-through;}}.goum {width: 100%;text-align: right;span:nth-of-type(1) {display: inline-block;width: 4.2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;font-size: 0.8rem;text-align: center;border-radius: 0.3rem;padding: 0.1rem;}}}}} } </style>

15.Favorite.vue

<template><div class="favorite"><top :flag="true"><i class="iconfont icon-fanhui sp2" @click="golist"></i><h3 class="hcc">收藏列表</h3></top></div> </template><script> import top from '../components/top' export default {name: 'Favorite',data () {return {}},methods: {golist () {this.$router.push('/HelloWorld');}},components: {top,} } </script><style scoped lang="less"> </style>

16.page文件夾下
goodshop.vue

<template><div class="goodshop"><ul><li v-for="(item,index) of booklist" :key="index"><router-link to="/HelloWorld">{{item.title}}{{item.fo}}</router-link></li></ul></div> </template><script> export default {name:'Goodshop',data () {return {booklist: [{ title: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'0' },{ title: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'1' },{ title: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'2' },{ title: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'3' },{ title: '學(xué)費(fèi)二三十萬的幼兒園值嗎？有幼兒園稱貴在空氣',fo:'>',index:'4' }]}},created () {//初始之后// this.getb();// this.booklist;//直接獲取自定義內(nèi)容},methods: {//自定義方法golist () {this.$router.push('/HelloWorld');},getb () {// return this.function().then((res) => {// this.booklist = res.booklist;// })}},components: {} } </script> <style scoped lang="less"> .goodshop{width:100%;ul {li {display: flex;display: -webkit-flex;margin: 1%;background-color: white;border-radius: 0.1rem;padding: 0.5rem;font-size: 0.4rem;justify-content: space-between;.router-link-exact-active {background: #ff5700;}}} } </style>

guess.vue

<template><div class="guess"><ul class="uls"><router-link v-for="(item,index) of booklist" :key="index" :to="{name:'goshop',params:{pid:item.index}}" tag="li"><img :src="item.image" :alt="item.image"><p>{{item.fo}}</p><div class="p2"><p><span class="pr">{{item.price|sumA| sumB('￥')}}</span><span class="pr2">{{item.prices| sumB('￥')}}</span></p><p><span class="pr3">首單減{{item.juan}}</span></p></div></router-link></ul></div> </template><script> import { getHotList } from '../api/index' export default {name: 'Guess',data () {return {booklist: []//存數(shù)據(jù)}},filters: {//過濾器sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.getb();},methods: {//自定義方法獲取getb () {return getHotList().then((res) => {this.booklist = res.hotlist;})}} } </script><style scoped lang="less"> .guess {.uls {display: -webkit-flex;display: flex;flex-wrap: wrap;margin: 0.2rem;li {-webkit-box-sizing: border-box;box-sizing: border-box;width: 48%;background-color: white;border-radius: 1%;margin: 1%;img {width: 98%;}p:nth-of-type(1) {width: 100%;font-size: 0.8rem;text-align: left;}.p2 {width: 100%;display: -webkit-flex;display: flex;justify-content:space-between;padding-bottom:.4rem;.pr {color: tomato;}.pr2{font-size:.6rem;text-decoration: line-through;}.pr3{width:3.5rem;display: inline-block;font-size: .7rem;color:tomato;border:.01rem solid tomato;margin-right: .25rem;}}}} } </style>

special.vue

<template><div class="special"><ul><li v-for="(items,index) of hotlist" :key="index"><div class="dv1"><img :src="items.image" :alt="items.image"></div><div class="dv2"><p><span class="tb">淘</span>{{items.fo}}</p><div class="jgprice"><p class="p1"><span>券</span><span>{{items.juan}}</span></p><p class="p2">已售2121萬</p></div><p class="coupon">券后<span class="s1">{{items.price| sumB('￥')}}</span><span class="s2">{{items.prices|sumA| sumB('￥')}}</span></p><p class="goum" @click="goback(items)"><span>前往購買></span></p></div></li></ul></div> </template><script> import { getHotList } from '../api/index' //2.引入cookie查找 import Cookies from 'js-cookie' export default {name:'Special',data () {return {hotlist: []//存數(shù)據(jù)}},filters: {sumA: function (value) {value = Number(value);return value.toFixed(2);},sumB: function (price, char) {return char + price}},created () {//初始之后this.geth();//獲取當(dāng)前方法},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},geth () {return getHotList().then((res) => {//獲取到定義的api的json數(shù)據(jù)this.hotlist = res.hotlist;})},goback (items) {this.$router.push({ name: 'goshop', params: { pid: items.index } })// this.$emit("jiagou",{// ipid:items// })}}, } </script><style scoped lang="less"> .special{width:100%;ul {li {margin: 0.1rem;background-color: white;border-radius: 0.2rem;padding: 0.3rem;display: flex;display: -webkit-flex;.dv1 {width: 30%;img {width: 91%;height: 100%;border: 1px slategrey dashed;}}.dv2 {width: 70%;p:nth-of-type(1) {width: 100%;text-align: left;font-size: 0.8rem;color: #000;.tb {width: 1rem;height: 1rem;line-height: 1rem;background-color: salmon;padding: 0.1rem;color: white;border-radius: 0.5rem;font-size: 0.7rem;text-align: center;}}}.jgprice {margin-top: 0.3rem;display: -webkit-flex;display: flex;justify-content: space-between;.p1 {width: 100%;span {font-size: 0.6rem;padding: 0.1rem 0.15rem;border: salmon 0.01rem solid;}span:nth-of-type(1) {width: 2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;}span:nth-of-type(2) {width: 3rem;height: 1rem;line-height: 1rem;color: salmon;font-weight: 500;}}.p2 {width: 100%;font-size: 0.8rem;text-align: right;color: slategray;font-weight: 600;}}.coupon {margin-top: 0.4rem;width: 100%;text-align: left;font-size: 0.7rem;.s1 {font-size: 1rem;}.s2 {text-decoration: line-through;}}.goum {width: 100%;text-align: right;span:nth-of-type(1) {display: inline-block;width: 4.2rem;height: 1rem;line-height: 1rem;background-color: salmon;color: white;font-size: 0.8rem;text-align: center;border-radius: 0.3rem;padding: 0.1rem;}}}}} </style>

weekend.vue

<template><div class="weekend"><ul><li v-for="(item,index) of booklist" :key="index"><p class="p1">天貓超市降爆款天天搶,還有更多五折包郵商品呦！</p><p class="p2">有效時(shí)間:<span>2019-04-01</span>至 <span>2019-04-30</span></p><div class="p3"><img :src="item.image" :alt="item.image"></div></li></ul></div> </template><script> import { getBanner } from '../api/index' export default {name:'weekend',data () {return {booklist: []//存數(shù)據(jù)}},created () {//初始之后this.getb();},methods: {//自定義方法golist () {//返回上一頁this.$router.push('/HelloWorld');},getb () {return getBanner().then((res) => {this.booklist = res.banner;})}}, } </script><style scoped lang="less"> .weekend{width:100%;ul {li {background-color: white;margin: 0.2rem;padding: 0.5rem;border-radius: 2%;p {width: 100%;text-align: left;}.p1 {font-weight: 520;}.p2 {font-size: 0.7rem;color: slategrey;}.p3 {width: 100%;img {margin:1%;width: 97%;height: 150px;margin-bottom: 0;}}}} } </style>

17.api文件夾下api自定義后臺數(shù)據(jù)
api下index.js

import axios from 'axios' // 創(chuàng)建公共的接口名 axios.defaults.baseURL="/static/mock/"; //請求的攔截（接口） axios.interceptors.request.use((config)=>{//一般是加請求頭參數(shù)//當(dāng)你有共同的參數(shù)時(shí)可以用此參數(shù)來用config.headers.a="1234"console.log(config);//可以找到a的值1234return config }) //每次數(shù)據(jù)拿到的值都是data，也可以創(chuàng)建一個(gè)公共的 //data已經(jīng)拿到數(shù)據(jù)的響應(yīng) axios.interceptors.response.use((res)=>{//數(shù)據(jù)響應(yīng)的攔截//return 啥就返回啥return res.data; }) //axios是封裝的promise //導(dǎo)出一個(gè)axios有很多，所以必須分開用變量來接收，不用default是導(dǎo)出全部 export let getBanner=function (){//用get接收json數(shù)據(jù)return axios.get('banner.json'); } export let getBanners=function (){//用get接收json數(shù)據(jù)return axios.get('banner.json');}export let getHotList=function (){//用get接收json數(shù)據(jù)return axios.get('hotlist.json');}

18.static靜態(tài)文件夾下img文件夾
img圖片:

19.static下mock文件夾
mock文件夾json數(shù)據(jù)
banner.json

{"banner":[{"src":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","index":"0","image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","name":"充電燈戶外照明LED大功率露營帳蓬充電燈泡夜市地?cái)偀魬?yīng)急燈家用USB充電燈泡停電照明燈家用移動(dòng)燈泡 58W白光（5-20小時(shí)）","fo":"充電燈戶外照明LED大功率露營帳蓬家用移動(dòng)燈泡 58W白光（5-20小時(shí)）","price":"30","yprice":"40"},{"src":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","price":"4.90","yprice":"14.90","id":4.0,"index":"1","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","name":"熒光棒演唱會道具兒童發(fā)光心形星星公主魔法棒玩具閃光仙女棒可愛頭飾成人頭飾帶燈新年禮物小玩具批發(fā) 新款星星棒","fo":"熒光棒演唱會道具兒童發(fā)光心形星星公主魔法棒"},{"src":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","index":"2","image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","name":"加厚擺地?cái)傌浖苷郫B貨架2米夜市擺攤架子掛衣架擺攤桌-p 加厚1米布架+背包","fo":"夜市擺攤架子掛衣架擺攤桌加厚1米布架+背包","price":"57","yprice":"67"},{"src":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","index":"3","image":"https://img12.360buyimg.com/mobilecms/s519x519_jfs/t1/119364/38/3338/552423/5ea7e439Ef85df0e7/3759b12c3c3d84bf.png.webp","name":"加厚擺地?cái)傌浖苷郫B貨架2米夜市擺攤架子掛衣架擺攤桌-p 加厚1米布架+背包","fo":"夜市擺攤架子掛衣架擺攤桌加厚1米布架+背包","price":"57","yprice":"67"},{"src":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","price":"4.90","yprice":"14.90","id":4.0,"index":"4","image":"https://m.360buyimg.com/mobilecms/s750x750_jfs/t22045/307/929094700/422408/3bc9906d/5b1be210Nf5b61f6c.jpg!q80.dpg.webp","name":"熒光棒演唱會道具兒童發(fā)光心形星星公主魔法棒玩具閃光仙女棒可愛頭飾成人頭飾帶燈新年禮物小玩具批發(fā) 新款星星棒","fo":"熒光棒演唱會道具兒童發(fā)光心形星星公主魔法棒"},{"src":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","index":"5","image":"https://img11.360buyimg.com/n2/s372x372_jfs/t1/59714/19/15384/96258/5dcd8916Ec8adb87c/19eb1d2ab0baf01c.jpg!q70.dpg.webp","name":"充電燈戶外照明LED大功率露營帳蓬充電燈泡夜市地?cái)偀魬?yīng)急燈家用USB充電燈泡停電照明燈家用移動(dòng)燈泡 58W白光（5-20小時(shí)）","fo":"充電燈戶外照明LED大功率露營帳蓬家用移動(dòng)燈泡 58W白光（5-20小時(shí)）","price":"30","yprice":"40"}] }

hotlist.json

使用這個(gè)項(xiàng)目之前必須下載,各種插件:
1.npm install js-cookie
2.npm install vue-awesome-swiper@2.5.4
3.npm i less less-loader style-loader
4.npm install axios

需注意：less的版本
更改前是 “l(fā)ess-loader”: “^7.0.2”,
更改后是 “l(fā)ess-loader”: “^5.0.0”,
直接更改方法:npm install less-loader@5.0.0 --save
less如果不行：請直接看這篇介紹：
https://blog.csdn.net/weixin_46409887/article/details/109627132
4.導(dǎo)航的跳轉(zhuǎn)有跳轉(zhuǎn)當(dāng)前的，有需要打開新頁面的，這里都有實(shí)現(xiàn)呢
5.vue項(xiàng)目的名字有大小寫限制，如果引入的name：‘名字’，大寫不好使，你就改寫小寫。

總結(jié):這里就不多介紹了，大家就去直接看代碼吧,🤭

總結(jié)

以上是生活随笔為你收集整理的2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：什么是寄生虫排名及寄生虫的排名原理和作用
下一篇： webshell批量寄生虫