有如下成绩单数据
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>
rand | name | math | chinese | english | total |
---|---|---|---|---|---|
{{ i }} | {{ v }} |
2、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
给1中的 加上v-if="score.math>=60 && score.chinese>=60 && score.english>=60"
如下所示:
3、还是采用上方相同的数据,添加筛选规则:
1)有三个按钮:语文、数学、外语,点击谁谁高亮,且当前筛选规则采用哪门学科
<!DOCTYPE html>
<button @click="field='math'" :class="{active: field === 'math'}">math
<button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese
<button @click="field='english'" :class="{active: field === 'english'}">english
<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>
2)两个输入框,【】~【】,前面天最小分数,后面填最大分数,全部设置完毕后,表格的数据会被更新只渲染满足所有条件的结果
举例:点击语文,输入【86】~【87】,那就只会渲染Jerry和Ben两条数据
<!DOCTYPE html>
<button @click="field='math'" :class="{active: field === 'math'}">math
<button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese
<button @click="field='english'" :class="{active: field === 'english'}">english
~
<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>