vue_02day练习

目录

• vue_02day
  • 作业
  • vue 框架 ：成绩单的实现
  • v-for 与 v-if 联用:
  • 3.添加筛选规则(深入) ：
  • 留言功能的页面实现:

vue_02day

作业

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模块中，用scores变量保存，然后对这个socres进行遍历，把stu对象中的各个数据进行相加，然后用一个数组把加完的数据存起来，用于在表格中展示。
在模板中通过循环将stu对象展示出来，先展示索引，再展示对应的值
先通过冒泡排序，把total排序好，然后再展示

vue 框架 ：成绩单的实现

  # vue框架快速生成表格，并按标签排序
<div id="app">

        <table border="1" cellpadding="10" cellspacing="1" 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="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;
            }
        }
    }
    new Vue({
        el: '#app',
        data: {
            scores: total_scores,
        }
    });
</script>

2.用上面的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

v-for 与 v-if 联用:

思路就是在for循环中加入一个if判断，将及格的数据都筛选出来展示
v-for 与 v-if 联用！！！（for 循环先执行）

<div id="app">
    <table border="1" width="400" rules="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,
        }
    });
    </script>

3.添加筛选规则(深入) ：

    i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
    ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
    举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
思路：
1、点击高亮
首先应该给一个类，这个类设置一个高亮样式，然后把类绑定给按钮，但是要给一个k-v形式的类，v用于控制这个类是否为true（是否起作用），再一个是把按钮绑定一个点击事件（包着一个含有参数的方法，这个方法就是用于判断前面的类的样式是否显示），所以一个逻辑过程，就是鼠标点击按钮，会把参数传到vue中，再把当前的rule进行设置，于是就可以将类（对应的css样式）展示出来
2、输入框，筛选数据
输入框绑定的v-model，控制input中的value，然后输出的数据是在第一种的基础上面，加了v-if（逻辑实现输入框没有数据或只有一个有数据就会展示全部学生数据，在区间内，存在的数据），会把满足筛选条件的数据展示出来。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3</title>
    <style>
        .active {
            background-color: pink;
        }
    </style>
</head>
<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="vue.js"></script>
<script>
    `
    let scores = null;
    $.ajax({
        url:'',
        success(response) {
            scores = response.data
        }
    });    // 模拟后端数据的传输接收·
    `;
    // 模拟当前页面加载成功，从后台获取操作的数据
    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 in遍历的是取值关键 | for of遍历的是值
    // 添加总分
    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,
            min: '',
            max: '',
            subject: '',
        }
    })
</script>
</html>

留言功能的页面实现:

 Vue 组件都是 Vue 实例

<style>
		<!-- ctrl + shift + /   注释快捷键 -->
		<!-- 鼠标的样式-->
           li:hover {
            color: blue;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="comment">
        <button type="button"  @click="send_msg">留言</button>    <!-- 添加留言 -->
        <ul>
            <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li> <!-- 删除留言 -->
        </ul>

    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            comment: '',
           msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],   /*三元表达式 localStorage.msgs 页面缓存数据，数组要json化 */
        },
        methods: {
            send_msg () {

                if (!this.comment) {   /* 对留言版做校验*/
                    alert('请输入内容...');
                    return false
                }
                this.msgs.push(this.comment); /*填充留言 添加到数组中*/
                this.comment = '';   /* 添加后清空输入框*/

                localStorage.msgs = JSON.stringify(this.msgs) /*数据转换位json 存入页面的缓存数据库（浏览器）*/
            },

            delete_msg(index) {
                this.msgs.splice(index,1) ; /* 数组的操作： index: 起始索引， 1： 操作几个， 后面的参数： 更改的内容*/
                localStorage.msgs = JSON.stringify(this.msgs)

            }
        }

    })
</script>