Vue little practice (for loop, Push method, bubbling, IF is determined (and in conjunction with the for loop), the button is highlighted, filtered in the input block)

Others 2019-11-13 19:06:31 views: null

vue practice

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

Bubble sort array and Bitwise Exclusive OR (^) - see programmers cognitive

Guess you like

Origin www.cnblogs.com/michealjy/p/11851713.html
Recommended
Ranking
SpringBoot-integrate redis
[Sword pointing to offer] Interview question 03: Repeated numbers in an array
Arrangement "Offer Penalty for prove safety" string
Browser prevent the automatic generation of fill and Echo have been saved account solutions
Work hard and never slacken——2022 Yinmai Information Year-End Summary
Install jdk7 on Linux system
App common dependency management tools
EduCoder-Web程序设计基础-html5— 给表单组件添加说明-第1关：label标签相关概念
Machine learning - clustering - density clustering algorithm notes
Ant's large model is exposed, AI+ finance enters the "big model" era
Daily
More
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)

Code World

© 2018 codetd.com