1. table标签的frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。
  2. frame属性可取的值及含义如下：
  3. * void - 默认值。表示不显示表格最外围的边框。
  4. * box - 同时显示四条边框。
  5. * border - 同时显示四条边框。
  6. * above - 只显示顶部边框。
  7. * below - 只显示底部边框。
  8. * lhs - 只显示左侧边框。
  9. * rhs - 只显示右侧边框。
  10. * hsides - 只显示水平方向的两条边框。
  11. * vsides - 只显示垂直方面的两条边框。
  12. rules 属性可取的值有五个，分别是：
  13. * none - 默认值。无边框。
  14. * groups - 给表格加外边框。
  15. * rows - 为行加边框。
  16. * cols - 为列加边框。
  17. * all - 为所有行列（单元格）加边框

先有一下成绩单数据

scores = [

{ name: 'Bob', math: 97, chinese: 89, english: 67 },

{ name: 'Tom', math: 67, chinese: 52, english: 98 },

{ name: 'Jerry', math: 72, chinese: 87, english: 89 },

{ name: 'Ben', math: 92, chinese: 87, english: 59 },

{ name: 'Chan', math: 47, chinese: 85, english: 92 },

]

用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>1</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <table border="1" style="margin: auto" rules="all">
  10.             <tr>
  11.                 <th>排名</th>
  12.                 <th>姓名</th>
  13.                 <th>数学</th>
  14.                 <th>语文</th>
  15.                 <th>英语</th>
  16.                 <th>总分</th>
  17.             </tr>
  18.             <!--有几个人，就循环渲染几行-->
  19.             <tr v-for="(score, i) in scores">
  20.                 <td>{{ i + 1 }}</td>
  21.                 <td v-for="v in score">{{v}}</td>
  22.             </tr>
  23.         </table>
  24.     </div>
  25. </body>
  26. <script src="js/vue.js"></script>
  27. <script>
  28.     `
  29.     let scores = null;
  30.     $.ajax({
  31.         url:'',
  32.         success(response) {
  33.             scores = response.data
  34.         }
  35.     });
  36.     `;
  37.     // 模拟当前页面加载成功，从后台获取操作的数据
  38.     let scores = [
  39.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  40.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  41.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  42.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  43.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  44.     ];
  45.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  46.     // 添加总分
  47.     for (score of scores) {
  48.         score.total = score.math + score.chinese + score.english;
  49.     }
  50.     // console.log(scores);
  51.     // 按照总分排序
  52.     for (let i=0; i<scores.length-1; i++) {
  53.         for (let j=0; j<scores.length-1-i; j++) {
  54.             if (scores[j].total < scores[j+1].total) {
  55.                 let temp = scores[j];
  56.                 scores[j] = scores[j+1];
  57.                 scores[j+1] = temp;
  58.             }
  59.         }
  60.     }
  61.     console.log(scores);
  63.     new Vue({
  64.         el: '#app',
  65.         data: {
  66.             // 属性名与值为变量的变量名相同，可以简写省略值
  67.             scores,
  68.         }
  69.     })
  70. </script>
  71. </html>

还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>2</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <table border="1" style="margin: auto" rules="all">
  10.             <tr>
  11.                 <th>排名</th>
  12.                 <th>姓名</th>
  13.                 <th>数学</th>
  14.                 <th>语文</th>
  15.                 <th>英语</th>
  16.                 <th>总分</th>
  17.             </tr>
  18.             <!--有几个人，就循环渲染几行-->
  19.             <tr v-for="(score, i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">
  20.                 <td>{{ i + 1 }}</td>
  21.                 <td v-for="v in score">{{v}}</td>
  22.             </tr>
  23.         </table>
  24.     </div>
  25. </body>
  26. <script src="js/vue.js"></script>
  27. <script>
  28.     `
  29.     let scores = null;
  30.     $.ajax({
  31.         url:'',
  32.         success(response) {
  33.             scores = response.data
  34.         }
  35.     });
  36.     `;
  37.     // 模拟当前页面加载成功，从后台获取操作的数据
  38.     let scores = [
  39.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  40.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  41.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  42.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  43.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  44.     ];
  45.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  46.     // 添加总分
  47.     for (score of scores) {
  48.         score.total = score.math + score.chinese + score.english;
  49.     }
  50.     // console.log(scores);
  51.     // 按照总分排序
  52.     for (let i=0; i<scores.length-1; i++) {
  53.         for (let j=0; j<scores.length-1-i; j++) {
  54.             if (scores[j].total < scores[j+1].total) {
  55.                 let temp = scores[j];
  56.                 scores[j] = scores[j+1];
  57.                 scores[j+1] = temp;
  58.             }
  59.         }
  60.     }
  61.     console.log(scores);
  63.     new Vue({
  64.         el: '#app',
  65.         data: {
  66.             // 属性名与值为变量的变量名相同，可以简写省略值
  67.             scores,
  68.         }
  69.     })
  70. </script>
  71. </html>

还是采用上方相同的数据，添加筛选规则：

i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果

举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3</title>
  6.     <style>
  7.         .active {
  8.             background-color: pink;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="app">
  14.         <div style="width: 400px; margin: 20px auto">
  15.             <button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
  16.             <button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
  17.             <button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
  18.             <input type="number" min="0" max="100" v-model="min">
  19.             ~
  20.             <input type="number" min="0" max="100" v-model="max">
  21.         </div>
  23.         <table width="400" border="1" style="margin: auto" rules="all">
  24.             <tr>
  25.                 <th>排名</th>
  26.                 <th>姓名</th>
  27.                 <th>数学</th>
  28.                 <th>语文</th>
  29.                 <th>英语</th>
  30.                 <th>总分</th>
  31.             </tr>
  32.             <tbody v-if="subject === 'math'">
  33.                 <tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
  34.                     <td>{{ i + 1 }}</td>
  35.                     <td v-for="v in score">{{v}}</td>
  36.                 </tr>
  37.             </tbody>
  38.             <tbody v-else-if="subject === 'chinese'">
  39.                 <tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
  40.                     <td>{{ i + 1 }}</td>
  41.                     <td v-for="v in score">{{v}}</td>
  42.                 </tr>
  43.             </tbody>
  44.             <tbody v-else-if="subject === 'english'">
  45.                 <tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
  46.                     <td>{{ i + 1 }}</td>
  47.                     <td v-for="v in score">{{v}}</td>
  48.                 </tr>
  49.             </tbody>
  50.             <tbody v-else>
  51.                 <tr v-for="(score, i) in scores">
  52.                     <td>{{ i + 1 }}</td>
  53.                     <td v-for="v in score">{{v}}</td>
  54.                 </tr>
  55.             </tbody>
  56.         </table>
  57.     </div>
  58. </body>
  59. <script src="js/vue.js"></script>
  60. <script>
  61.     `
  62.     let scores = null;
  63.     $.ajax({
  64.         url:'',
  65.         success(response) {
  66.             scores = response.data
  67.         }
  68.     });
  69.     `;
  70.     // 模拟当前页面加载成功，从后台获取操作的数据
  71.     let scores = [
  72.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  73.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  74.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  75.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  76.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  77.     ];
  78.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  79.     // 添加总分
  80.     for (score of scores) {
  81.         score.total = score.math + score.chinese + score.english;
  82.     }
  83.     // console.log(scores);
  84.     // 按照总分排序
  85.     for (let i=0; i<scores.length-1; i++) {
  86.         for (let j=0; j<scores.length-1-i; j++) {
  87.             if (scores[j].total < scores[j+1].total) {
  88.                 let temp = scores[j];
  89.                 scores[j] = scores[j+1];
  90.                 scores[j+1] = temp;
  91.             }
  92.         }
  93.     }
  94.     console.log(scores);
  96.     new Vue({
  97.         el: '#app',
  98.         data: {
  99.             // 属性名与值为变量的变量名相同，可以简写省略值
  100.             scores,
  101.             min: '',
  102.             max: '',
  103.             subject: '',
  104.         }
  105.     })
  106. </script>
  107. </html>

vue2 练习的更多相关文章

  1. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  2. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  3. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  4. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  5. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  6. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  7. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  8. vue2.0实战

    学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...

  9. vue DatePicker vue2.0的日期插件

    一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...

  10. vue2/vuex2的那点坑

    说是坑,其实大部分是我们自己的过错! vuex官方demo在1.0可以运行,在2.0报错?此类问题,应该很常见吧? 还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了? ...

随机推荐

  1. go 计算 MD5

    Golang的加密库都放在crypto目录下,其中MD5库在crypto/md5包中,该包主要提供了New和Sum函数 直接调用md5计算 package main import ( "cr ...

  2. 提示ORA-28000 the account is locked

    1.启动项目的时候提示ORA-28000 the account is locked. 2. 这是因为用户被锁定了. 查询FAILED_LOGIN_ATTEMPTS参数默认值,这个参数限制了从第一次登 ...

  3. Java:集合类的数据结构

    本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java的集合其实就是各种基本的数据结构(栈,队列,hash表等),基于业务需求进而演变出的Java特有的数据 ...

  4. 请写一段 PHP 代码 ，确保多个进程同时写入同一个文件成功

    方案一: function writeData($filepath, $data) { $fp = fopen($filepath,'a'); do{ usleep(100); }while (!fl ...

  5. S4VM解析

    S4VM解析 2018年08月03日 15:20:59 stringlife 阅读数 1233   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...

  6. Spring、SpringMVC版本及配置

    一.Spring版本 Spring的最新版本是Spring 5.x,Spring 4.x的最后版本是Spring 4.3.x,会维护到2020年(Spring的GitHub主页对此有说明). 二.Sp ...

  7. 怎样在微信H5中点击直接跳转到公众号

    第一步: 打开微信公众号, 随便找一篇公众号文章, 将它发送给你的某个好友. 第二步: 使用默认浏览器打开这个分享的文章链接, 然后复制链接里面的biz字段到下面这个URL中替换 第三步: 在html ...

  8. Scala学习二十一——隐式转换和隐式参数

    一.本章要点 隐式转换用于类型之间的转换 必须引入隐式转换,并确保它们可以以单个标识符的形式出现在当前作用域 隐式参数列表会要求指定类型的对象.它们可以从当前作用域中以单个标识符定义的隐式对象的获取, ...

  9. SqlServer2008 R2发布订阅

    网上好多大神写的贴子,自己也看着贴子弄的,写的已经很详细了,我就不重复写了,贴上参考资料: http://www.cnblogs.com/dudu/archive/2010/08/26/1808540 ...

  10. .NET Core 3.0 发布单文件可执行程序

    Windows dotnet publish -r win10-x64 /p:PublishSingleFile=true maxOS dotnet publish -r osx-x64 /p:Pub ...