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>