Vue 指令demo

有如下成绩单数据
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

    
    


    

        

            

                
rand
                
name
                
math
                
chinese
                
english
                
total
            
            

                
{{ i }}
                
{{ v }}
            
        
    

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

给1中的 加上v-if="score.math>=60 && score.chinese>=60 && score.english>=60"
如下所示：

3、还是采用上方相同的数据，添加筛选规则：
1）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

    
    
    


    

        

            math
            chniese
            english
        

        

        

            

                
rand
                
name
                
math
                
chinese
                
english
                
total
            
            

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

    

​ 2）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
​ 举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据

    
    
    


    

        

            math
            chniese
            english
            

            
            ~
            
        

        

        

            

                
rand
                
name
                
math
                
chinese
                
english
                
total
            
            

                

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

            

                

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

            

                

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

            

                

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