Vue 指令demo
有如下成绩单数据
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 },
]
1、用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table class="table table-hover" border="1" align="center" cellspacing="1" cellpadding="10">
<tr>
<th>rand</th>
<th>name</th>
<th>math</th>
<th>chinese</th>
<th>english</th>
<th>total</th>
</tr>
<tr v-for="(score,i) in scores">
<td align="center">{{ i }}</td>
<td v-for="v in score" align="center">{{ 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 },
];
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>
2、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
给1中的<tr v-for="(score,i) in scores"> 加上v-if="score.math>=60 && score.chinese>=60 && score.english>=60"
如下所示:
<tr v-for="(score,i) in scores" v-if="score.math>=60 && score.chinese>=60 && score.english>=60">
3、还是采用上方相同的数据,添加筛选规则:
1)有三个按钮:语文、数学、外语,点击谁谁高亮,且当前筛选规则采用哪门学科
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background: pink;
}
</style>
</head>
<body>
<div id="app">
<div align="center">
<button @click="field='math'" :class="{active: field === 'math'}">math</button>
<button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese</button>
<button @click="field='english'" :class="{active: field === 'english'}">english</button>
</div>
<br>
<table class="table table-hover" border="1" align="center" cellspacing="1" cellpadding="10">
<tr>
<th>rand</th>
<th>name</th>
<th >math</th>
<th >chinese</th>
<th >english</th>
<th>total</th>
</tr>
<tr v-for="(score,i) in scores" v-if="score.math>=60 && score.chinese>=60 && score.english>=60">
<td align="center">{{ i+1 }}</td>
<td v-for="v in score" align="center" >{{ 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 },
];
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,
field:'',
}
})
</script>
</html>
2)两个输入框,【】~【】,前面天最小分数,后面填最大分数,全部设置完毕后,表格的数据会被更新只渲染满足所有条件的结果
举例:点击语文,输入【86】~【87】,那就只会渲染Jerry和Ben两条数据
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background: pink;
}
</style>
</head>
<body>
<div id="app">
<div align="center">
<button @click="field='math'" :class="{active: field === 'math'}">math</button>
<button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese</button>
<button @click="field='english'" :class="{active: field === 'english'}">english</button>
<br>
<input type="number" min="0" max="100" v-model="min">
~
<input type="number" min="0" max="100" v-model="max">
</div>
<br>
<table class="table table-hover" border="1" align="center" cellspacing="1" cellpadding="10">
<tr>
<th>rand</th>
<th>name</th>
<th >math</th>
<th >chinese</th>
<th >english</th>
<th>total</th>
</tr>
<tbody v-if="field==='math'">
<tr v-for="(score,i) in scores" v-if="score.math>=min && score.math<=max || (!min||!max)">
<td align="center">{{ i+1 }}</td>
<td v-for="v in score" align="center" >{{ v }}</td>
</tr>
</tbody>
<tbody v-else-if="field==='chinese'">
<tr v-for="(score,i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min||!max)">
<td align="center">{{ i+1 }}</td>
<td v-for="v in score" align="center" >{{ v }}</td>
</tr>
</tbody>
<tbody v-else-if="field==='english'">
<tr v-for="(score,i) in scores" v-if="score.english>=min && score.english<=max || (!min||!max)">
<td align="center">{{ i+1 }}</td>
<td v-for="v in score" align="center" >{{ v }}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(score,i) in scores" >
<td align="center">{{ i+1 }}</td>
<td v-for="v in score" align="center" >{{ 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 },
];
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,
field:'',
min:'',
max:'',
}
})
</script>
</html>