vue2 练习
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 练习的更多相关文章
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- vue2.0实战
学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...
- vue DatePicker vue2.0的日期插件
一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...
- vue2/vuex2的那点坑
说是坑,其实大部分是我们自己的过错! vuex官方demo在1.0可以运行,在2.0报错?此类问题,应该很常见吧? 还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了? ...
随机推荐
- [转帖]centos7设置CPU的运行频率为performance
centos7设置CPU的运行频率为performance http://www.512873.com/archives/612.html Publish: March 6, 2019 Categor ...
- 【AtCoder】Mujin Programming Challenge 2017
Mujin Programming Challenge 2017 A - Robot Racing 如果每个数都是一个一个间隔开的,那么答案是\(n!\) 考虑把一个数挪到1,第二个数挪到3,以此类推 ...
- C++版 归并排序
在原作者基础上加入注释 原作者:https://www.cnblogs.com/agui521/p/6918229.html 归并排序:归并排序(英语:Merge sort,或mergesort),是 ...
- Python---通配符的使用
苹果单价 9.00 元/斤,购买了 5.00 斤,需要支付 45.00 元 在 Python 中可以使用 print 函数将信息输出到控制台 如果希望输出文字信息的同时,一起输出 数据,就需要使用到 ...
- 160个creakme（八）
peid跑一下,没有壳 就是输入一个码 直接运行一下,出现错误提示 找字符串能找到代码位置 然后看一下401E43的引用,好像跳转指令后面就是注册成功相关字符串 然后nop掉这条指令,发现可以运行出正 ...
- MySQL 聚合函数（三）MySQL对GROUP BY的处理
原文来自MySQL 5.7 官方手册:12.20.3 MySQL Handling of GROUP BY SQL-92和更早版本不允许SELECT列表,HAVING条件或ORDER BY列表引用未在 ...
- WINAPI与CALLBACK
#define WINAPI __stdcall #define CALLBACK __stdcall 都是__stdcall,无本质区别. CALLBACK只是为了告诉我们这是一个回调函数.
- 使用python+selenium获得b站今日播放的动漫
from selenium import webdriver browser=webdriver.Chrome() browser.get('https://www.bilibili.com/anim ...
- XML模块与类的定义
xml模块 xml介绍: --XML 全称 可扩展标记语言 --<tag></tag> 双标签 标签中间可以加入文本信息 --<tag/>单标签 没有文本 ...
- vue覆盖UI组件样式不生效
检查检查是不是加了scoped 在vue中,我们需要引用子组件,包括ui组件(element.iview). 但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的. 去掉scope ...