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>
冒泡排序數組以及按位異或(^)——看程序員認知
