• JSD-2204-酷莎商城-ElementUI-Day07

    1.ElementUI

    续day06笔记后续的两个小案例

    1.1走马灯(轮播图)

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8.     .el-carousel__item h3 {
    9.       color: #475669;
    10.       font-size: 14px;
    11.       opacity: 0.75;
    12.       line-height: 150px;
    13.       margin: 0;
    14.     }
    15.  
    16.     .el-carousel__item:nth-child(2n) {
    17.       background-color: #99a9bf;
    18.     }
    19.  
    20.     .el-carousel__item:nth-child(2n+1) {
    21.       background-color: #d3dce6;
    22.     }
    23.   </style>
    24. </head>
    25. <body>
    26. <div id="app">
    27.   <template>
    28.     <div class="block">
    29.       <span class="demonstration">默认 Hover 指示器触发</span>
    30.       <el-carousel height="150px">
    31.         <el-carousel-item v-for="item in 4" :key="item">
    32.           <h3 class="small">{{ item }}</h3>
    33.         </el-carousel-item>
    34.       </el-carousel>
    35.     </div>
    36.     <div class="block">
    37.       <span class="demonstration">Click 指示器触发</span>
    38.       <el-carousel trigger="click" height="150px">
    39.         <el-carousel-item v-for="item in 4" :key="item">
    40.           <h3 class="small">{{ item }}</h3>
    41.         </el-carousel-item>
    42.       </el-carousel>
    43.     </div>
    44.   </template>
    45. <h1>带图片的轮播图</h1>
    46.   <div style="width: 350px">
    47.     <el-carousel trigger="click" height="150px">
    48.       <el-carousel-item v-for="item in arr">
    49.         <img :src="item" width="100%" alt="">
    50.       </el-carousel-item>
    51.     </el-carousel>
    52.   </div>
    53. </div>
    54. </body>
    55. <!-- import Vue before Element -->
    56. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    57. <!-- import JavaScript -->
    58. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    59. <script>
    60.   let v = new Vue({
    61.     el: '#app',
    62.     data: function() {
    63.       return {//在这里面定义变量
    64.         arr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b4.jpg"]
    65.       }
    66.     }
    67.   })
    68. </script>
    69. </html>

    1.2设置页面布局

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8.     .el-header {
    9.       background-color: #B3C0D1;
    10.       color: #333;
    11.       line-height: 60px;
    12.     }
    13.  
    14.     .el-aside {
    15.       color: #333;
    16.     }
    17.   </style>
    18. </head>
    19. <body>
    20. <div id="app">
    21.   <el-container>
    22.     <el-aside width="200px">
    23.       <el-menu :default-openeds="['1', '3']">
    24.         <el-submenu index="1">
    25.           <template slot="title"><i class="el-icon-message"></i>导航一</template>
    26.           <el-menu-item-group>
    27.             <template slot="title">分组一</template>
    28.             <el-menu-item index="1-1">选项1</el-menu-item>
    29.             <el-menu-item index="1-2">选项2</el-menu-item>
    30.           </el-menu-item-group>
    31.           <el-menu-item-group title="分组2">
    32.             <el-menu-item index="1-3">选项3</el-menu-item>
    33.           </el-menu-item-group>
    34.           <el-submenu index="1-4">
    35.             <template slot="title">选项4</template>
    36.             <el-menu-item index="1-4-1">选项4-1</el-menu-item>
    37.           </el-submenu>
    38.         </el-submenu>
    39.         <el-submenu index="2">
    40.           <template slot="title"><i class="el-icon-menu"></i>导航二</template>
    41.           <el-menu-item-group>
    42.             <template slot="title">分组一</template>
    43.             <el-menu-item index="2-1">选项1</el-menu-item>
    44.             <el-menu-item index="2-2">选项2</el-menu-item>
    45.           </el-menu-item-group>
    46.           <el-menu-item-group title="分组2">
    47.             <el-menu-item index="2-3">选项3</el-menu-item>
    48.           </el-menu-item-group>
    49.           <el-submenu index="2-4">
    50.             <template slot="title">选项4</template>
    51.             <el-menu-item index="2-4-1">选项4-1</el-menu-item>
    52.           </el-submenu>
    53.         </el-submenu>
    54.         <el-submenu index="3">
    55.           <template slot="title"><i class="el-icon-setting"></i>导航三</template>
    56.           <el-menu-item-group>
    57.             <template slot="title">分组一</template>
    58.             <el-menu-item index="3-1">选项1</el-menu-item>
    59.             <el-menu-item index="3-2">选项2</el-menu-item>
    60.           </el-menu-item-group>
    61.           <el-menu-item-group title="分组2">
    62.             <el-menu-item index="3-3">选项3</el-menu-item>
    63.           </el-menu-item-group>
    64.           <el-submenu index="3-4">
    65.             <template slot="title">选项4</template>
    66.             <el-menu-item index="3-4-1">选项4-1</el-menu-item>
    67.           </el-submenu>
    68.         </el-submenu>
    69.       </el-menu>
    70.     </el-aside>
    71.     <el-container>
    72.       <el-header style="text-align: right">
    73.         <el-dropdown>
    74.           <i class="el-icon-setting" style="margin-right: 15px"></i>
    75.           <el-dropdown-menu slot="dropdown">
    76.             <el-dropdown-item>查看</el-dropdown-item>
    77.             <el-dropdown-item>新增</el-dropdown-item>
    78.             <el-dropdown-item>删除</el-dropdown-item>
    79.           </el-dropdown-menu>
    80.         </el-dropdown>
    81.         <span>王小虎</span>
    82.       </el-header>
    83.       <el-main>
    84.         <el-table :data="tableData">
    85.           <el-table-column prop="date" label="日期" width="140">
    86.           </el-table-column>
    87.           <el-table-column prop="name" label="姓名" width="120">
    88.           </el-table-column>
    89.           <el-table-column prop="address" label="地址">
    90.           </el-table-column>
    91.         </el-table>
    92.       </el-main>
    93.     </el-container>
    94.   </el-container>
    95. </div>
    96. </body>
    97. <!-- import Vue before Element -->
    98. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    99. <!-- import JavaScript -->
    100. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    101. <script>
    102.   let v = new Vue({
    103.     el: '#app',
    104.     data: function() {
    105.       const item = {
    106.         date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'
    107.       };
    108.       return {//在这里面定义变量
    109.         tableData: Array(20).fill(item)
    110.       }
    111.     }
    112.   })
    113. </script>
    114. </html>

    2.酷莎商城

    2.1登录页面

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.   <style>
    8.     body{
    9.       margin: 0;/*去掉自带的8个像素外边距*/
    10.       background-image: url("imgs/bg.jpg");
    11.       /*cover封面 */
    12.       background-size: cover;
    13.       text-align: center;
    14.     }
    15.     h1{
    16.       font-size: 72px;
    17.       color: rgb(0,150,220);
    18.       margin-bottom: 0;
    19.     }
    20.     img{width: 100px}
    21.     h2{
    22.       font-size: 32px;
    23.       color: rgb(0,150,220);
    24.       margin: 0;
    25.     }
    26.   </style>
    27. </head>
    28. <body>
    29. <div id="app">
    30.   <h1>欢迎来到酷鲨商城</h1>
    31.   <img src="imgs/shark.png" alt="">
    32.   <h2>CoolSharkMall</h2>
    33.   <el-card style="width: 600px;height: 300px;margin: 0 auto;
    34.   background-color: rgba(255,255,255,0.3)">
    35.     <!--label-width设置左侧文本的宽度-->
    36.     <el-form style="width: 400px;margin: 50px auto" label-width="60px">
    37.       <el-form-item label="用户名">
    38.         <el-input type="text" placeholder="请输入用户名"></el-input>
    39.       </el-form-item>
    40.       <el-form-item label="密码">
    41.         <el-input type="password" placeholder="请输入密码"></el-input>
    42.       </el-form-item>
    43.       <el-form-item >
    44.         <el-button style="position: relative;right: 30px" type="primary">登录</el-button>
    45.       </el-form-item>
    46.     </el-form>
    47.  
    48.   </el-card>
    49. </div>
    50. </body>
    51. <!-- import Vue before Element -->
    52. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    53. <!-- import JavaScript -->
    54. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    55. <script>
    56.   let v = new Vue({
    57.     el: '#app',
    58.     data: function() {
    59.       return {//在这里面定义变量
    60.  
    61.       }
    62.     }
    63.   })
    64. </script>
    65. </html>

     页面效果展示：

    2.2首页

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <!-- import CSS -->
    6.     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7.     <style>
    8.         header a {
    9.             text-decoration: none;
    10.             color: #6c6c6c;
    11.         }
    12.         .el-menu.el-menu--horizontal {
    13.             border-bottom: none;
    14.         }
    15.         .el-table .el-table__cell{
    16.             padding: 0;/*去掉排行榜表格中上下的内边距*/
    17.         }
    18.     </style>
    19. </head>
    20. <body>
    21. <div id="app">
    22.     <el-container>
    23.         <el-header height="150">
    24.             <div style="width: 1200px;margin: 0 auto">
    25.                 <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
    26.                 <span>
    27.           <a href="">首页</a><el-divider direction="vertical"></el-divider>
    28.           <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
    29.           <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
    30.           <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
    31.           <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
    32.           <a href="">帮助</a>
    33.         </span>
    34.             </div>
    35.             <!--蓝色导航菜单开始-->
    36.             <div style="background-color: #82c8ec">
    37.                 <el-menu style="width: 1200px;margin: 0 auto"
    38.                          :default-active="1"
    39.                          class="el-menu-demo"
    40.                          mode="horizontal"
    41.                          background-color="#82c8ec"
    42.                          text-color="#fff"
    43.                          active-text-color="#fff">
    44.                     <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
    45.                     <!--搜索框开始-->
    46.                     <div style="float: right;margin-top: 10px">
    47.                         <el-input placeholder="请输入搜索内容">
    48.                             <!--slot="append"作用是将按钮追加在搜索框的后面-->
    49.                             <el-button slot="append" icon="el-icon-search"></el-button>
    50.                         </el-input>
    51.                     </div>
    52.                     <!--搜索框结束-->
    53.                 </el-menu>
    54.             </div>
    55.             <!--蓝色导航菜单结束-->
    56.         </el-header>
    57.         <el-main style="width: 1200px;margin: 0 auto">
    58.             <!--轮播图和排行榜开始-->
    59.             <el-row :gutter="20">
    60.                 <el-col :span="18">
    61.                     <el-carousel trigger="click" height="300px">
    62.                         <el-carousel-item v-for="item in bannerArr">
    63.                             <img :src="item" width="100%" alt="">
    64.                         </el-carousel-item>
    65.                     </el-carousel>
    66.                 </el-col>
    67.                 <el-col :span="6">
    68.                     <el-card style="height: 300px">
    69.                         <h3>
    70.                             <i style="font-weight: bold" class="el-icon-trophy">销量最高</i>
    71.                         </h3>
    72.                         <el-divider></el-divider>
    73.                         <el-table :data="topArr" style="width: 100%">
    74.                             <!--type="index" 让这一列显示成编号-->
    75.                             <el-table-column type="index" label="排名" width="50">
    76.                             </el-table-column>
    77.                             <el-table-column prop="title" label="商品名" width="80">
    78.                             </el-table-column>
    79.                             <el-table-column prop="saleCount" label="销量" width="80">
    80.                             </el-table-column>
    81.                         </el-table>
    82.                     </el-card>
    83.                 </el-col>
    84.             </el-row>
    85.             <!--轮播图和排行榜结束-->
    86.             <!--商品列表开始-->
    87.             <el-row :gutter="20">
    88.                 <el-col :span="6" v-for="p in productArr" style="margin-top: 20px">
    89.                     <el-card>
    90.                         <img :src="p.url" width="100%" alt="">
    91.                         <div>
    92.                             <p style="font-size: 15px;height: 40px;margin-top: 0">{{p.title}}</p>
    93.                             <div style="color: #666">
    94.                                 <span>￥{{p.price}}</span>
    95.                                 <s style="font-size: 12px">{{p.oldPrice}}</s>
    96.                                 <span style="float: right">销量:{{p.saleCount}}</span>
    97.                             </div>
    98.  
    99.                         </div>
    100.                     </el-card>
    101.                 </el-col>
    102.             </el-row>
    103.             <!--商品列表结束-->
    104.         </el-main>
    105.         <el-footer>
    106.             <div style="height: 95px;background-image: url('imgs/wave.png');margin-bottom: -30px"></div>
    107.             <div style="height: 100px;background-color: #3f3f3f;
    108.             padding: 30px;text-align: center;color: #b1b1b1">
    109.                 <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
    110.                 <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
    111.                 <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
    112.             </div>
    113.         </el-footer>
    114.     </el-container>
    115. </div>
    116. </body>
    117. <!-- import Vue before Element -->
    118. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    119. <!-- import JavaScript -->
    120. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    121. <script>
    122.     let v = new Vue({
    123.         el: '#app',
    124.         data: function () {
    125.             return {//在这里面定义变量
    126.                 categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
    127.                     {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
    128.                     {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
    129.                 ],
    130.                 bannerArr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b4.jpg"],
    131.                 topArr:[{title:"小米手机",saleCount:988},
    132.                     {title:"李宁球鞋",saleCount:708},
    133.                     {title:"毛巾",saleCount:653},
    134.                     {title:"安踏拖鞋",saleCount:553},
    135.                     {title:"阿迪袜子",saleCount:438},
    136.                     {title:"耐克上衣",saleCount:88}],
    137.                 productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
    138.                     {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
    139.                     {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
    140.                     {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
    141.                     {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
    142.                     {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
    143.                     {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
    144.                     {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
    145.                     {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
    146.                     {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
    147.                     {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
    148.                     {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
    149.             }
    150.         }
    151.     })
    152. </script>
    153. </html>

     页面效果展示：

    2.3后台页面

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <!-- import CSS -->
    6.   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    7. </head>
    8. <body>
    9. <div id="app">
    10.   <el-container>
    11.     <el-header style="background-color: #0095d7">
    12.       <h1 style="color: white;font-size: 22px">CoolShark商城后台管理系统
    13.         <span style="float: right">欢迎xxx回来! <a href="">退出登录</a></span>
    14.       </h1>
    15.     </el-header>
    16.     <el-container>
    17.       <el-aside width="200px">
    18.         <!--:default-openeds设置默认打开的子菜单-->
    19.         <el-menu @select="handleSelect" :default-openeds="['1']">
    20.           <el-submenu index="1">
    21.             <!--下面是设置子菜单的标题-->
    22.             <template slot="title">
    23.               <i class="el-icon-s-flag"> 分类管理</i>
    24.             </template>
    25.             <!--下面是两个菜单项-->
    26.             <el-menu-item index="1-1">分类列表</el-menu-item>
    27.             <el-menu-item index="1-2">添加分类</el-menu-item>
    28.           </el-submenu>
    29.           <el-submenu index="2">
    30.             <!--下面是设置子菜单的标题-->
    31.             <template slot="title">
    32.               <i class="el-icon-picture"> 轮播图管理</i>
    33.             </template>
    34.             <!--下面是两个菜单项-->
    35.             <el-menu-item index="2-1">轮播图列表</el-menu-item>
    36.             <el-menu-item index="2-2">添加轮播图</el-menu-item>
    37.           </el-submenu>
    38.           <el-submenu index="3">
    39.             <!--下面是设置子菜单的标题-->
    40.             <template slot="title">
    41.               <i class="el-icon-shopping-cart-2"> 商品管理</i>
    42.             </template>
    43.             <!--下面是两个菜单项-->
    44.             <el-menu-item index="3-1">商品列表</el-menu-item>
    45.             <el-menu-item index="3-2">添加商品</el-menu-item>
    46.           </el-submenu>
    47.         </el-menu>
    48.  
    49.       </el-aside>
    50.       <el-main>
    51.         <!--分类表格开始-->
    52.         <el-table v-if="selectedIndex=='1-1'" :data="categoryArr" style="width: 100%">
    53.           <!--prop=property属性 , 设置这一列显示的数据-->
    54.           <el-table-column type="index" label="编号" width="280">
    55.           </el-table-column>
    56.           <el-table-column prop="name" label="名字" width="280">
    57.           </el-table-column>
    58.           <el-table-column label="操作">
    59.             <template slot-scope="scope">
    60.               <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
    61.               scope.row得到这一行对应的对象-->
    62.               <el-button size="mini" type="danger"
    63.                          @click="friendDelete(scope.$index, scope.row)">删除</el-button>
    64.             </template>
    65.           </el-table-column>
    66.         </el-table>
    67.         <!--分类表格结束-->
    68.         <!--轮播图表格开始-->
    69.         <el-table v-if="selectedIndex=='2-1'" :data="bannerArr" style="width: 100%">
    70.           <!--prop=property属性 , 设置这一列显示的数据-->
    71.           <el-table-column type="index" label="编号" width="280">
    72.           </el-table-column>
    73.           <el-table-column label="轮播图" width="280">
    74.             <template slot-scope="scope">
    75.               <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
    76.               scope.row得到这一行对应数组里面的图片路径-->
    77.               <img :src="scope.row" width="100%" alt="">
    78.             </template>
    79.           </el-table-column>
    80.           <el-table-column label="操作">
    81.             <template slot-scope="scope">
    82.               <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
    83.               scope.row得到这一行对应的对象-->
    84.               <el-button size="mini" type="danger"
    85.                          @click="friendDelete(scope.$index, scope.row)">删除</el-button>
    86.             </template>
    87.           </el-table-column>
    88.         </el-table>
    89.         <!--轮播图表格结束-->
    90.         <!--商品表格开始-->
    91.         <el-table v-if="selectedIndex=='3-1'" :data="productArr" style="width: 100%">
    92.           <!--prop=property属性 , 设置这一列显示的数据-->
    93.           <el-table-column type="index" label="编号" width="100">
    94.           </el-table-column>
    95.           <el-table-column prop="title" label="商品标题" width="200">
    96.           </el-table-column>
    97.           <el-table-column prop="price" label="价格" width="100">
    98.           </el-table-column>
    99.           <el-table-column prop="oldPrice" label="原价" width="100">
    100.           </el-table-column>
    101.           <el-table-column prop="saleCount" label="销量" width="100">
    102.           </el-table-column>
    103.           <el-table-column label="商品图片" width="100">
    104.             <template slot-scope="scope">
    105.               <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
    106.               scope.row得到这一行对应数组里面的图片路径-->
    107.               <img :src="scope.row.url" width="100%" alt="">
    108.             </template>
    109.           </el-table-column>
    110.           <el-table-column label="操作">
    111.             <template slot-scope="scope">
    112.               <!--scope里面装着这一行所对应的对象信息,scope.$index得到下标
    113.               scope.row得到这一行对应的对象-->
    114.               <el-button size="mini" type="danger"
    115.                          @click="friendDelete(scope.$index, scope.row)">删除</el-button>
    116.             </template>
    117.           </el-table-column>
    118.         </el-table>
    119.         <!--商品表格结束-->
    120.       </el-main>
    121.     </el-container>
    122.   </el-container>
    123. </div>
    124. </body>
    125. <!-- import Vue before Element -->
    126. <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    127. <!-- import JavaScript -->
    128. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    129. <script>
    130.   let v = new Vue({
    131.     el: '#app',
    132.     data: function() {
    133.       return {//在这里面定义变量
    134.         selectedIndex:"1-1",
    135.         categoryArr: [{id: 1, name: "精彩活动"}, {id: 2, name: "当季女装"},
    136.           {id: 3, name: "品牌男装"}, {id: 4, name: "环球美食"}, {id: 5, name: "医药健康"},
    137.           {id: 6, name: "美妆彩妆"}, {id: 7, name: "母婴产品"}
    138.         ],
    139.         bannerArr:["imgs/b1.jpg","imgs/b2.jpg","imgs/b3.jpg","imgs/b4.jpg"],
    140.         productArr:[{title:"森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342},
    141.           {title:"茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",price:233,oldPrice:598,url:"imgs/b.jpg",saleCount:2342},
    142.           {title:"雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",price:233,oldPrice:598,url:"imgs/c.jpg",saleCount:2342},
    143.           {title:"【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",price:233,oldPrice:598,url:"imgs/d.jpg",saleCount:2342},
    144.           {title:"BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",price:233,oldPrice:598,url:"imgs/e.jpg",saleCount:2342},
    145.           {title:"香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",price:233,oldPrice:598,url:"imgs/f.jpg",saleCount:2342},
    146.           {title:"SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",price:233,oldPrice:598,url:"imgs/g.jpg",saleCount:2342},
    147.           {title:"美特斯邦威女MTEE 贺岁系列中长款风衣736598",price:233,oldPrice:598,url:"imgs/h.jpg",saleCount:2342},
    148.           {title:"imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",price:233,oldPrice:598,url:"imgs/i.jpg",saleCount:2342},
    149.           {title:"BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",price:233,oldPrice:598,url:"imgs/j.jpg",saleCount:2342},
    150.           {title:"憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",price:233,oldPrice:598,url:"imgs/k.jpg",saleCount:2342},
    151.           {title:"美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",price:233,oldPrice:598,url:"imgs/a.jpg",saleCount:2342}]
    152.       }
    153.     },
    154.     methods:{
    155.       handleSelect(index){
    156.         console.log(index);
    157.         v.selectedIndex = index;
    158.       }
    159.     }
    160.   })
    161. </script>
    162. </html>

    页面效果展示：

     

  • 相关阅读:
    查理复用-小笔记
    delphi xe FMX里的窗口如何像处理像VCL里的消息又一示例
    SpringBoot整合Flowable
    JAVA面试题JVM篇（三）
    2022年中级经济师《经济基础知识》考试大纲
    【kotlin】Kotlin学习：run、with、apply、also、let的区别
    业务线程池阻塞分析
    Java -Stream流和常见函数式接口
    【Spring Cloud实战】Ribbon负载均衡
    【Android】使用 adb 命令行工具结合 pm列出 Android 设备上已安装应用的应用名称和包名
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125626754