4.综合实例

4.1.基于数据驱动的选项卡

4.1.1.需求

  1. 需求说明：
  3. 1. 被选中的选项按钮颜色成橙色
  5. 2. 完成被选中选项下的数据列表渲染
  7. 3. 完成选项切换

4.1.2.代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #tab div {
  8.             display: none;
  9.             padding: 10px;
  10.             border: 1px solid black;
  11.             width: 428px;
  12.         }
  13.         #tab div.active{
  14.             display: block;
  16.         }
  17.         #tab button.active{
  18.             background-color: orange;
  19.         }
  20.         #tab button{
  21.             width: 150px;
  22.             height: 50px;
  23.         }
  24.         #tab ul{
  25.             padding: 0;
  26.         }
  27.         #tab li{
  28.             list-style: none;
  29.             height: 40px;
  30.             line-height: 40px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <div id="app">
  36.     <div id="tab">
  37.         <button @click="changeTab(i)" :class="{active: index==i}" v-for="(item, i) in tabData">{{item.tabTitle}}</button>
  38.         <div v-for="(item, j) in tabData" :class="{active: index==j}">
  39.             <ul>
  40.                 <li v-for="listitem in item.list">{{listitem.newsTitle}}</li>
  41.             </ul>
  42.         </div>
  43.     </div>
  44. </div>
  45. <script src="node_modules/vue/dist/vue.js"></script>
  46. <script>
  48.     new Vue({
  49.         el: '#app',
  50.         data:{
  51.             tabData:[
  52.                 {
  53.                     tabTitle:'财经',
  54.                     list: [
  55.                         {id:1, newsTitle: '大数据刷新认知：平均每天都有儿童在遭受性侵！'},
  56.                         {id:2, newsTitle: '董登新：外资没有能力把中国的保险市场全部吃掉'},
  57.                         {id:3, newsTitle: '收评：沪指大幅回调跌1.80% 钢铁板块领跌两市'},
  58.                         {id:4, newsTitle: '党报评个税改革：起征点并非越高越好 需统筹平衡'},
  59.                     ]
  60.                 },
  61.                 {
  62.                     tabTitle:'股票',
  63.                     list: [
  64.                         {id:1, newsTitle: '2.5万股民心凉!200多亿市值没了 长生被基金0估值'},
  65.                         {id:2, newsTitle: '美年健康回应深交所6大关切：医师执业确有瑕疵'},
  66.                         {id:3, newsTitle: '详细解读！中央政治局会议透露出这些重大信息！'},
  67.                         {id:4, newsTitle: '业绩预增近3倍却瞬间跌停！谁撂倒了这只绩优股？'},
  68.                     ]
  69.                 },
  70.                 {
  71.                     tabTitle:'商业',
  72.                     list: [
  73.                         {id:1, newsTitle: 'SOHO中国全面竞价租房 潘石屹感慨房子坍塌敲警钟'},
  74.                         {id:2, newsTitle: 'iPhone吸金 服务创新高 苹果盈利收入两位数大涨\n'},
  75.                         {id:3, newsTitle: '《西虹市首富》5天破12亿 开心麻花战略转型？'},
  76.                         {id:4, newsTitle: 'Twitter股价暴跌超20% 美国社交平台陷流量瓶颈'},
  77.                     ]
  78.                 },
  79.             ],
  80.             index: 0
  81.         },
  82.         methods: {
  83.             changeTab(i){
  84.                 this.index = i
  85.             }
  86.         }
  87.     })
  88. </script>
  89. </body>
  90. </html>

4.1.2.练习作业

尝试完成下一节课程的需求，请保持自己独立实现，不要先看实现的代码

4.2.后台管理菜单

4.2.1.需求

  1. 需求说明：
  3. 1. 完成菜单列表渲染
  5. 2. 点击相应菜单，展开其子菜单，再次点击，收缩子菜单

4.2.2.相关资源下载地址

静态文件下载地址

4.2.3.代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             box-sizing: border-box;
  9.         }
  11.         body {
  12.             margin: 0;
  13.         }
  15.         ul {
  16.             padding: 0;
  17.         }
  18.         a{
  19.             text-decoration: none;
  20.             color: hsla(0, 0%, 100%, .65);
  21.         }
  23.         ul li {
  24.             list-style: none;
  25.         }
  27.         #menu {
  28.             width: 200px;
  29.             height: 800px;
  30.             background-color: #001529;
  31.         }
  33.         #menu .logo {
  34.             height: 64px;
  35.             background-color: #002140;
  36.             padding-left: 16px;
  37.             line-height: 64px;
  38.         }
  40.         #menu .logo h1 {
  41.             font-size: 16px;
  42.             color: #fff;
  43.             margin: 0 0 0 5px;
  44.         }
  46.         #menu .logo h1, #menu .logo img {
  47.             display: inline-block;
  48.             vertical-align: middle;
  49.         }
  51.         .menu-content {
  52.             color: hsla(0, 0%, 100%, .65);
  53.             font-size: 14px;
  54.             padding: 0;
  55.         }
  57.         .menu-content .submenu {
  58.             padding-left: 16px;
  60.         }
  62.         .submenu .submenu-title {
  63.             padding: 10px 0;
  64.         }
  66.         .submenu .submenu-list {
  67.             padding-left: 16px;
  68.         }
  70.         .submenu .submenu-list li {
  71.             padding: 5px 0;
  72.         }
  73.         .submenu .submenu-list{
  74.             display: none;
  75.         }
  76.         .submenu .active{
  77.             display: block;
  78.             color: #fff;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83. <div id="app">
  84.     <div id="menu">
  85.         <div class="logo">
  86.             <a href="http://nodeing.com">
  87.                 <img src="images/logo.ico" alt="">
  88.                 <h1>螺钉课堂后台管理</h1>
  89.             </a>
  90.         </div>
  91.         <ul class="menu-content">
  92.             <menu-list  v-for="item in menuData" :key="item.id" :item="item"></menu-list>
  93.         </ul>
  94.     </div>
  95. </div>
  96. <script src="node_modules/vue/dist/vue.js"></script>
  97. <script>
  98.     Vue.component('menu-list', {
  99.         template: ` <li class="submenu" >
  100.                 <div class="submenu-title" @click="show">{{item.submenu_title}}</div>
  101.                 <ul :class="[submenulist,{active: isShow}]">
  102.                     <li v-for="value in item.submenu_lists" :key="value.href"><a :href="value.href">{{value.content}}</a></li>
  103.                 </ul>
  104.             </li>`,
  105.         props: ['menuData', 'item'],
  106.         data(){
  107.             return {
  108.                 isShow: false,
  109.                 submenulist: 'submenu-list'
  110.             }
  111.         },
  112.         methods:{
  113.             show(){
  114.                 this.isShow = !this.isShow
  115.             }
  116.         }
  117.     });
  118.     new Vue({
  119.         el: "#app",
  120.         data: {
  121.             menuData: [
  122.                 {   id: 1,
  123.                     submenu_title: '课程管理',
  124.                     submenu_lists: [
  125.                         {
  126.                             content: '课程列表',
  127.                             href: '/course/list'
  128.                         },
  129.                         {
  130.                             content: '创建课程',
  131.                             href: '/course/create'
  132.                         },
  133.                         {
  134.                             content: '课程统计',
  135.                             href: '/course/statistical'
  136.                         },
  137.                     ]
  138.                 },
  139.                 {
  140.                     id:2,
  141.                     submenu_title: '用户管理',
  142.                     submenu_lists: [
  143.                         {
  144.                             content: '用户列表',
  145.                             href: '/user/list'
  146.                         },
  147.                         {
  148.                             content: '增加用户',
  149.                             href: '/user/add'
  150.                         },
  151.                         {
  152.                             content: '在线用户',
  153.                             href: '/user/online'
  154.                         },
  155.                         {
  156.                             content: '登录日志',
  157.                             href: '/user/loginlog'
  158.                         },
  159.                         {
  160.                             content: '批量导入',
  161.                             href: '/user/import'
  162.                         },
  163.                     ]
  164.                 },
  165.                 {
  166.                     id: 3,
  167.                     submenu_title: '会员管理',
  168.                     submenu_lists: [
  169.                         {
  170.                             content: '全部会员',
  171.                             href: '/vip/all'
  172.                         },
  173.                         {
  174.                             content: '添加会员',
  175.                             href: '/vip/add'
  176.                         },
  177.                         {
  178.                             content: '会员等级',
  179.                             href: '/vip/level'
  180.                         },
  181.                         {
  182.                             content: '即将到期会员',
  183.                             href: '/vip/willexpire'
  184.                         },
  185.                         {
  186.                             content: '过期会员',
  187.                             href: '/vip/expired'
  188.                         },
  189.                     ]
  190.                 },
  191.                 {
  192.                     id:4,
  193.                     submenu_title: '系统设置',
  194.                     submenu_lists: [
  195.                         {
  196.                             content: '网站基础信息',
  197.                             href: '/system/basis'
  198.                         },
  199.                         {
  200.                             content: '主题设置',
  201.                             href: '/system/theme'
  202.                         },
  203.                         {
  204.                             content: '导航设置',
  205.                             href: '/system/nav'
  206.                         },
  207.                         {
  208.                             content: '友情链接',
  209.                             href: '/system/links'
  210.                         },
  211.                         {
  212.                             content: '财务设置',
  213.                             href: '/system/Finance'
  214.                         },
  215.                     ]
  216.                 }
  217.             ]
  218.         }
  219.     })
  220. </script>
  221. </body>
  222. </html>

4.3.购物车

4.3.1.需求

  1. 需求说明：
  3. 1. 循环渲染出所有商品
  5. 2. 商品数量加减后，统计单个商品总价
  7. 3. 点击每个商品的删除按钮可以删除当前商品
  9. 4. 统计商品数量，统计选中商品数量 
  11. 5. 统计选中商品总价
  13. 6. 删除选中商品
  15. 7. 实现全选功能

4.3.2.实现代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             background-color: #F5F5F5;
  9.         }
  11.         #shoppingcart {
  12.             width: 960px;
  13.             margin: 50px auto;
  15.         }
  17.         #shoppingcart button {
  18.             padding: 10px 20px;
  19.             font-size: 16px;
  20.             border-radius: 5px;
  21.         }
  23.         #shoppingcart button.danger {
  24.             background-color: red;
  25.             padding: 8px;
  26.             border: none;
  27.             color: white;
  28.         }
  30.         #shoppingcart .ipt {
  31.             width: 60px;
  32.             height: 36px;
  33.             border: 1px solid #ccc;
  34.             border-radius: 5px;
  35.             padding-left: 20px;
  36.         }
  38.         #shoppingcart table {
  39.             width: 100%;
  40.             background-color: #fff;
  42.         }
  44.         #shoppingcart table td {
  45.             padding: 10px 0;
  46.             text-align: center;
  47.         }
  49.         .footer {
  50.             height: 70px;
  51.             background-color: #fff;
  52.             margin-top: 30px;
  53.             line-height: 70px;
  54.         }
  56.         .footer-left {
  57.             float: left;
  58.             padding-left: 24px;
  59.         }
  61.         .footer-left a, .footer-left span {
  62.             margin-left: 10px;
  63.         }
  65.         .footer-right {
  66.             float: right;
  67.             padding-right: 24px;
  69.         }
  71.         .footer-right button, .footer-right div {
  72.             display: inline-block;
  73.         }
  75.         .footer-right button {
  76.             background-color: #00c3f5;
  77.             padding: 8px 16px;
  78.             border-radius: 5px;
  79.             color: #fff;
  80.         }
  82.         .footer-right span {
  83.             font-weight: bold;
  84.             font-size: 16px;
  85.             color: red;
  86.             margin-right: 20px;
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91. <div id="app">
  92.     <div id="shoppingcart">
  93.         <table>
  94.             <tr>
  95.                 <td><input type="checkbox" v-model="ischeckedAll">全选</td>
  96.                 <td>商品</td>
  97.                 <td>单价(元)</td>
  98.                 <td>数量</td>
  99.                 <td>小记(元)</td>
  100.                 <td>操作</td>
  101.             </tr>
  102.             <tr v-for="item in goods" :key="item.id">
  103.                 <td><input type="checkbox" v-model="item.checked"></td>
  104.                 <td>{{item.goods_name}}</td>
  105.                 <td>{{item.goods_price}}</td>
  106.                 <td>
  107.                     <button @click="decrease(item.id)">-</button>
  108.                     <input type="text" v-model="item.goods_num" class="ipt">
  109.                     <button @click="increase(item.id)">+</button>
  110.                 </td>
  111.                 <td>{{item.goods_price * item.goods_num}}</td>
  112.                 <td>
  113.                     <button @click="delete_goods(item.id)" class="danger">删除</button>
  114.                 </td>
  115.             </tr>
  117.         </table>
  118.         <div class="footer">
  119.             <div class="footer-left">
  120.                 <input type="checkbox" v-model="ischeckedAll">
  121.                 <span>全选</span>
  122.                 <a @click="delete_checked">删除选中的商品</a>
  123.                 <span>共{{goods.length}}件商品，已选择{{checkedLength}}件</span>
  124.                 {{checkedId}}
  125.             </div>
  126.             <div class="footer-right">
  127.                 <div>合计(不含运费): <span>¥{{total_price}}元</span></div>
  128.                 <button>去结算</button>
  129.             </div>
  130.         </div>
  131.     </div>
  132. </div>
  133. <script src="node_modules/vue/dist/vue.js"></script>
  134. <script>
  135.     let goods = [
  136.         {
  137.             id: 1,
  138.             goods_name: '魅族手环',
  139.             goods_price: 169,
  140.             goods_num: 1,
  141.             checked: true
  143.         },
  144.         {
  145.             id: 2,
  146.             goods_name: '魅族耳机',
  147.             goods_price: 163,
  148.             goods_num: 1,
  149.             checked: true
  151.         },
  152.         {
  153.             id: 3,
  154.             goods_name: '小米汽车',
  155.             goods_price: 1890,
  156.             goods_num: 1,
  157.             checked: false
  159.         },
  160.         {
  161.             id: 4,
  162.             goods_name: '坚果pro2',
  163.             goods_price: 1699,
  164.             goods_num: 1,
  165.             checked: true
  167.         }
  168.     ]
  169.     new Vue({
  170.         el: '#app',
  171.         data: {
  172.             goods: goods
  173.         },
  174.         methods: {
  175.             increase(id) {
  176.                 for (let item of this.goods.values()) {
  177.                     if (item.id == id) {
  178.                         item.goods_num++
  179.                     }
  180.                 }
  181.             },
  182.             decrease(id) {
  183.                 for (let item of this.goods.values()) {
  184.                     if (item.id == id && item.goods_num > 1) {
  185.                         item.goods_num--
  186.                     }
  187.                 }
  188.             },
  189.             delete_goods(id) {
  190.                 this.goods = this.goods.filter((item) => {
  191.                     //满足条件的保留 不满足条件的删除
  192.                     return item.id !== id
  193.                 })
  194.             },
  195.             delete_checked() {
  196.                 this.goods = this.goods.filter((item) => {
  197.                     return !item.checked
  198.                 })
  199.             }
  200.         },
  201.         computed: {
  202.             total_price() {
  203.                 let result = 0
  204.                 for (let item of this.goods.values()) {
  205.                     if (item.checked) {
  206.                         result += item.goods_num * item.goods_price
  207.                     }
  208.                 }
  209.                 return result
  210.             },
  211.             ischeckedAll: {
  212.                 get() {
  213.                     return this.goods.every((item) => {
  214.                         return item.checked
  215.                     })
  216.                 },
  217.                 set(newValue){
  218.                     this.goods.forEach((item)=>{
  219.                         item.checked = newValue
  220.                     })
  221.                 }
  223.             },
  224.             checkedLength() {
  225.                 return this.goods.filter((item) => {
  226.                     return item.checked
  227.                 }).length
  228.             }
  229.         }
  230.     })
  231. </script>
  232. </body>
  233. </html>

螺钉课堂视频课程地址：http://edu.nodeing.com

vue基础入门（4）的更多相关文章

  1. vue基础入门（2.1）

    2.vue基础用法 2.1.事件处理 2.1.1.监听事件 使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...

  2. vue基础入门

    Hello World   <body> <!-- 在angularJS中用ng-model --> <!-- {{mseeage?message:11}}支持三元表达式 ...

  3. vue基础入门（3）

    3.组件基础 3.1.什么是组件? 3.1.1.理解组件 前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...

  4. vue基础入门（2.3）

    2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...

  5. vue基础入门（2.2）

    2.2.基础指令 2.2.1.什么是指令 指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...

  6. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  7. Vue基础入门笔记

    不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...

  8. vue基础入门（1）

    1.vue初体验 1.1.vue简介 1.1.1.vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,什么叫做渐进式呢?通俗的讲就是一层一层的,一步一 ...

  9. vue 基础入门（一）

    app-1 :声明式渲染 app-2 :绑定元素特性 v-bind 特性被称为指令.指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性. app-3 app-4 :条件与循环 app-5 ,ap ...

随机推荐

  1. Rocket - diplomacy - IdRange

    https://mp.weixin.qq.com/s/qqL2XWqAhVcnGSxs6kxhLg   介绍IdRange的实现.   ​​   1. 基本定义   A non-empty half- ...

  2. F5忘记密码修改教程

    !!!首先查看系统版本,13版本和14版本修改密码方式不一致 首先介绍13版本修改密码 注:12版本也适用,11版本未测试,应该也可以,有问题欢迎留言) 1. 将终端连接到BIG-IP串行控制台端口. ...

  3. Java实现 LeetCode 795 区间子数组个数 （暴力分析）

    795. 区间子数组个数 给定一个元素都是正整数的数组A ,正整数 L 以及 R (L <= R). 求连续.非空且其中最大元素满足大于等于L 小于等于R的子数组个数. 例如 : 输入: A = ...

  4. Java实现 LeetCode 526 优美的排列（DFS）

    526. 优美的排列 假设有从 1 到 N 的 N 个整数,如果从这 N 个数字中成功构造出一个数组,使得数组的第 i 位 (1 <= i <= N) 满足如下两个条件中的一个,我们就称这 ...

  5. Java实现 LeetCode 508 出现次数最多的子树元素和

    508. 出现次数最多的子树元素和 给出二叉树的根,找出出现次数最多的子树元素和.一个结点的子树元素和定义为以该结点为根的二叉树上所有结点的元素之和(包括结点本身).然后求出出现次数最多的子树元素和. ...

  6. Java实现 蓝桥杯 算法训练 数据交换

    试题 算法训练 数据交换 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 编写一个程序,输入两个整数,分别存放在变量x和y当中,然后使用自己定义的函数swap来交换这两个变量的值. ...

  7. Linux 源码包安装过程

    安装准备 安装gcc编译器 下载源码包 源代码保存位置:/usr/local/src/ 软件安装位置:/usr/local/ 解压缩下载的源码包 进入解压缩目录 软件配置与检查:./configure ...

  8. TZOJ 复习时间

    描述 为了能过个好年,xhd开始复习了,于是每天晚上背着书往教室跑.为了追求更高的效率,xhd要根据难度值来选择合适的课程进行复习,复习后一门课的效率为前一门课之间的难度差的平方,而复习第一门课的效率 ...

  9. SpringSecurity(2)---记住我功能实现

    SpringSecurity(2)---记住我功能实现 上一篇博客实现了认证+授权的基本功能,这里在这个基础上,添加一个 记住我的功能. 上一篇博客地址:SpringSecurity(1)---认证+ ...

  10. 使用Aspose.word (Java) 填充word文档数据（包含图片填充）

    Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...