Vue小练习（for循环，push方法，冒泡，if判断（以及与for循环的连用），按钮高亮，根据input框筛选数据）
vue练习
'''
1. 先有一下成绩单数据
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
'''
'''
思路：
逻辑都在js模块中,
首先这个数据放到js中，用scores变量保存，然后对这个scores进行 遍历，把stu对象中的各个数据进行相加，然后用一个数组把加完的数据存起来，用于 在表格中展示。
在模板中通过循环将stu对象展示出来，先展示索引，在展示对应的值
先通过冒泡排序，把total排好序，然后再展示
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="all" style="margin: auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(stu,i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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},
];
let total_scores = [];
for (stu of scores) {
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for(let i = 0; i < total_scores.length - 1; i++) {
for(let j = 0; j < total_scores.length - 1 - i; j++) {
if (total_scores[j].total < total_scores[j+1].total) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores);
new Vue({
el: '#app',
data: {
scores: total_scores,
}
});
//冒泡排序，替换只和j有关，i从长度减一，++，j从长度减一减i，++ ,内部做替换
let arr = [1, 4, 2, 5, 3];
for (let i=0; i < arr.length - 1; i++) {
for (let j=0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j+1]) {
// arr[j] ^= arr[j+1];
// arr[j+1] ^= arr[j];
// arr[j] ^= arr[j+1];
let t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
console.log(arr);
</script>
</html>
## 关于冒泡排序的异或请看下面的链接
'''
2. 用上面的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
#思路就是在for循环中加入一个If判断，将及格的数据都筛选出来展示
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="all" style="margin: auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(stu,i) in scores" v-if="stu.math>60&&stu.chinese>60&&stu.english>60"> #这句做一个筛选
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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},
];
let total_scores = [];
for (stu of scores) {
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for(let i = 0; i < total_scores.length - 1; i++) {
for(let j = 0; j < total_scores.length - 1 - i; j++) {
if (total_scores[j].total < total_scores[j+1].total) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores);
new Vue({
el: '#app',
data: {
scores: total_scores,
},
// filters: {
// f1(stu) {
// console.log(stu);
// return true
// }
// }
});
</script>
</html>
'''
3.还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
'''
'''
思路：
A：点击高亮
首先应该给一个类，这个类设置一个高亮样式，然后把类绑定给按钮，但是要给一个k-v形式的类，v用于控制这个类是否为true（发挥作用），在一个是把按钮绑定一个点击事件（包着一个含参方法，这个方法就是用于判断前面的类样式是否显示），所以一个逻辑过程，就是鼠标点击按钮，会把参数传到vue中，再把当前的rule进行设置，于是就可以将类（对应的css样式）展示出来。
B：输入框，筛选数据。
输入框绑定的v-model，控制input中的value，然后输出的数据是在第1种的基础上面，加了v-if（逻辑实现输入框没数据或只有一个有数据就展示全部学生数据，在区间内存在的数据），会把满足筛选条件的数据展示出来
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.action {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<p style="margin: 10px auto; width: 400px">
<button :class="{action: rule === 'chinese'}" @click="clickAction('chinese')">语文</button>
<button :class="{action: rule === 'math'}" @click="clickAction('math')">数学</button>
<button :class="{action: rule === 'english'}" @click="clickAction('english')">英语</button>
<input type="number" min="1" max="100" v-model="min">
~
<input type="number" min="1" max="100" v-model="max">
</p>
<table border="1" width="400" rules="all" style="margin: auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="rule === 'math'">
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.math >= +min && stu.math <= +max) || (!min || !max)"> #
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<tbody v-else-if="rule === 'chinese'"> #第一步是筛选是否有高亮按钮
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.chinese >= +min && stu.chinese <= +max) || (!min || !max)"> #第一个and筛选框是否空，第二个筛选是否有在输入框间的数据，第三个||筛选是否一个有数据，一个没有数据
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<tbody v-else-if="rule === 'english'">
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.english >= +min && stu.english <= +max) || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(stu,i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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},
];
let total_scores = [];
for (stu of scores) {
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for(let i = 0; i < total_scores.length - 1; i++) {
for(let j = 0; j < total_scores.length - 1 - i; j++) {
if (total_scores[j].total < total_scores[j+1].total) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores);
new Vue({
el: '#app',
data: {
scores: total_scores,
rule: '',
min: '',
max: '',
},
methods: {
clickAction(rule) {
this.rule = rule;
}
}
});
</script>
</html>
Vue小练习（for循环，push方法，冒泡，if判断（以及与for循环的连用），按钮高亮，根据input框筛选数据）的更多相关文章
- 转: ffmpeg循环推流方法
from: https://blog.csdn.net/weiyuefei/article/details/64125208 ffmpeg循环推流方法 You should be able to u ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue深度学习（4）-方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"> <button>确认添加</button> ...
- VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
随机推荐
- Nginx 负载均衡算法
Nginx 负载均衡算法 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务,如果后端某台服务器死机,自动剔除故障系统,使用户访问不受影响. upstream tomcat_server { ...
- Paper | Dynamic Residual Dense Network for Image Denoising
目录 1. 故事 2. 动机 3. 做法 3.1 DRDB 3.2 训练方法 4. 实验 发表于2019 Sensors.这篇文章的思想可能来源于2018 ECCV的SkipNet[11]. 没开源, ...
- CentOS6.9安装SonarQube7.6
1 安装前准备 Java (Oracle JRE 8 or OpenJDK 8) MySQL5.6 or MySQL5.7,具体可参考Centos6.9安装MySQL5.6 SonarQube7.6, ...
- 软件----- idea 配置创建一个简单javase项目
1.显示工具栏和工具按钮,勾选上 如图,在左侧会增加对应的 2.设置项目结构,选择jdk 点击new 选择需要jdk 3.创建一个简单的java文件,和eclipse与myeslipse 差不多, ...
- 项目整合SpringDataRedis
1:准备工作 先导入redis和jedis依赖,在配置redis-config.properties 和applicationContext-redis.xml (详细配置信息及入门demo见我上一篇 ...
- spring的一些概念及优点
Spring是一个轻量级的DI和AOP容器框架.说它轻量级有一大部分原因是相对于EJB的(虽然本人从来没有接触过EJB的应用),但重要的是Spring是非侵入式的,基于Spring开发应用一般不依赖于 ...
- 如何让 FFmpeg 支持异步并行转码、截图等等操作？
直接贴代码了: ffmpegTest02.cs public partial class ffmpegTest02 : FormBase { private static readonly strin ...
- 在.net中读写config文件的各种方法【转】
今天谈谈在.net中读写config文件的各种方法. 在这篇博客中,我将介绍各种配置文件的读写操作. 由于内容较为直观,因此没有过多的空道理,只有实实在在的演示代码, 目的只为了再现实战开发中的各种场 ...
- EntityFrameworkCore 学习笔记之示例一
直接贴代码了: 1. Program.cs using Microsoft.EntityFrameworkCore; using System; using System.Threading.Task ...
- Python Jupyter 网站编辑器
Python Jupyter 网站编辑器 jupyter 是 python的网站编辑器可以直接在网页内编写python代码并执行,内置是通过ipython来调用的.很方便灵活. 安装 1.安装ipyt ...