table标签的frame和rules属性,可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性,而 rules 则控制着表格内部边框的可见性。
frame属性可取的值及含义如下:
* void - 默认值。表示不显示表格最外围的边框。
* box - 同时显示四条边框。
* border - 同时显示四条边框。
* above - 只显示顶部边框。
* below - 只显示底部边框。
* lhs - 只显示左侧边框。
* rhs - 只显示右侧边框。
* hsides - 只显示水平方向的两条边框。
* vsides - 只显示垂直方面的两条边框。
rules 属性可取的值有五个,分别是:
* none - 默认值。无边框。
* groups - 给表格加外边框。
* rows - 为行加边框。
* cols - 为列加边框。
* 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表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分;

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人,就循环渲染几行-->
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let 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 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
}
})
</script>
</html>

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人,就循环渲染几行-->
<tr v-for="(score, i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let 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 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
}
})
</script>
</html>

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

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

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3</title>
<style>
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div style="width: 400px; margin: 20px auto">
<button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
<button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
<button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
<input type="number" min="0" max="100" v-model="min">
~
<input type="number" min="0" max="100" v-model="max">
</div> <table width="400" border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="subject === 'math'">
<tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'chinese'">
<tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject === 'english'">
<tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(score, i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功,从后台获取操作的数据
let 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 },
];
// 补充:for in遍历的是取值关键 | for of遍历的是值
// 添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}
// console.log(scores);
// 按照总分排序
for (let i=0; i<scores.length-1; i++) {
for (let j=0; j<scores.length-1-i; j++) {
if (scores[j].total < scores[j+1].total) {
let temp = scores[j];
scores[j] = scores[j+1];
scores[j+1] = temp;
}
}
}
console.log(scores); new Vue({
el: '#app',
data: {
// 属性名与值为变量的变量名相同,可以简写省略值
scores,
min: '',
max: '',
subject: '',
}
})
</script>
</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. JSONObject,JSONArray,对象,数组互相转化

    json类型对象转化成对象类型 JSONObject.toJavaObject(jsonObj, Object.class) json类型对象转化为List类型 JSONArray.parseArra ...

  2. Python http.server中获取Post的请求报文

    今天在自学http.server请求命令, 各个字段都很好理解, 但唯独想打印获取Post请求报文时, 被难住了, 网上找了很多帖子, 官方的文档也刷了几遍, 但没有一个明确的答复. 后来不经意间看到 ...

  3. redis 入门教程

    https://edu.aliyun.com/course/22/lesson/list?spm=5176.8252056.759075.5.Bbrpyz

  4. 作业10:String类

    一.基本案例 1.new String("helloworld") 与 "helloworld" public static void main(String[ ...

  5. Eclipse中项目本身没有问题,可是工程名却有红色小叉叉解决办法

    右击项目“Properties”,在弹出的“Properties”的左侧边框,单击“Project Facets”,打开“Project Facets”页面, 在页面中“Java”下拉选项中,选择与自 ...

  6. kalilinux 渗透测试笔记

    声明:本文理论大部分是苑房弘kalilinux渗透测试的内容 第五章:基本工具 克隆网页,把gitbook的书记下载到本地 httrack "http://www.mybatis.org/m ...

  7. 使用Leangoo玩转故事地图

    转自:https://www.leangoo.com/9944.html 用户故事是在敏捷开发中表达需求的主要方式,我们在做敏捷开发的时候都有需求池的概念,在Scrum中这个需求池就是产品backlo ...

  8. 系统模块 sys 函数的调用

    系统模块 sys 运行时系统相关的信息 sys模块的数据 数据 描述 sys.path 模块搜索路径 path[0] 是当前脚本程序的路径名,否则为 '' sys.modules 已加载模块的字典 s ...

  9. Django—处理流程

    用户通过浏览器发送请求 请求到达request中间件,中间件对request请求做预处理或者直接返回response 若未返回response,会到达urlconf路由,找到对应视图函数 视图函数做相 ...

  10. 《设计模式之美》 <02>评判代码质量好坏的维度

    如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...