vue_02day练习

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框架快速生成表格，并按标签排序  


        

            

                
排名
                
姓名
                
数学
                
语文
                
英语
                
总分
            
            

                
{{ i + 1 }}
                
{{ v }}
            
        
    

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

v-for 与 v-if 联用:

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


    

        

            
排名
            
姓名
            
数学
            
语文
            
英语
            
总分
        
        
        

            
{{ i+1}}
            
{{ v}}
        
    

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

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

    
    
    


    

        

            数学
            语文
            英语
            
            ~
            
        

        

            

                
排名
                
姓名
                
数学
                
语文
                
英语
                
总分
            
            

                

                    
{{ i + 1 }}
                    
{{v}}
                
            
            

                

                    
{{ i + 1 }}
                    
{{v}}
                
            
            

                

                    
{{ i + 1 }}
                    
{{v}}
                
            
            

                

                    
{{ i + 1 }}
                    
{{v}}
                
            
        
    

留言功能的页面实现:

 Vue 组件都是 Vue 实例
 



    

        
        留言    
        

            
{{ msg }}