vue课后作业

有如下成绩单数据
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>

Title

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>

Title

<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>

Title

    <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>

posted @ 2019-12-29 12:48 ^啷个哩个啷$ 阅读( ...) 评论( ...) 编辑收藏

猜你喜欢