首页 > 其他 > 详细

Vue练习

时间:2019-12-18 23:35:57      阅读:112      评论:0      收藏:0      [点我收藏+]
"""
2、先有一下成绩单数据
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表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分;
3、还是采用上方相同的数据,采用相同的渲染规则,只渲染所有科目都及格了的学生。
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table>
        <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v,k) in scores">
                <td>{{k+1}}</td>
                <td v-for="i in v">{{i}}</td>
            </tr>
        </tbody>
    </table>

</div>

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

</body>
</html>
"""
1、还是采用上方相同的数据,添加筛选规则:
    i)有三个按钮:语文、数学、外语,点击谁谁高亮,且当前筛选规则采用哪门学科
    ii)两个输入框,【】~【】,前面天最小分数,后面填最大分数,全部设置完毕后,表格的数据会被更新只渲染满足所有条件的结果
    举例:点击语文,输入【86】~【87】,那就只会渲染Jerry和Ben两条数据
"""
<body>
    <div id="app">
        <div style="width: 400px; margin: 20px auto">
            <button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
            <button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
            <button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
            <input type="number" min="0" max="100" v-model="min">
            ~
            <input type="number" min="0" max="100" v-model="max">
        </div>
        <table width="400" border="1" style="margin: auto" rules="all">
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
            <tbody v-if="subject === 'math'">
                <tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in score">{{v}}</td>
                </tr>
            </tbody>
            <tbody v-else-if="subject === 'chinese'">
                <tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in score">{{v}}</td>
                </tr>
            </tbody>
            <tbody v-else-if="subject === 'english'">
                <tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in score">{{v}}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr v-for="(score,i) in scores">
                    <td>{{i+1}}</td>
                    <td v-for="v in score">{{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;
    }
    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;
            }
        }
    }
    new Vue({
        el: '#app',
        data: {
            scores,
            min: '',
            max: '',
            subject: '',
        }
    })
</script>

Vue练习

原文:https://www.cnblogs.com/samoo/p/12063783.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!