Vue.js(1)：初体验

　　今天晚上开始学习Vue，折腾了快4个小时才完成一个基本练习。 　　开始练习基本语法，只涉及元素、数据、计算方法，完成了练习。 　　后来想加入样式判断，本来用计算方法可以实现，但是想用计算属性就熬人了，关键在获取v-for里面的数据时以及正确的函数写法遇到了问题，反复查资料反复试，熬了2个多小时，不过最终解决了还是有所收获。

　　完成的练习：

    
    
    
    Vue.js
    
    
        .table td{
	        background-color:#ffffff;
	        height:25px;
	        line-height:200%;
        }
        .normal{color: black;}
        .GT90{color:red;}
        .LT60{color: green;}
        .bold{font-weight: bold;}
    


    

        
        
        {{title}}
        
            
                学号
                姓名
                语文
                数学
                总分
                操作
            
            
                {{item.Id}}
                {{item.Name}}
                {{item.ChineseScore}}
                {{item.MathScore}}
                {{item.ChineseScore + item.MathScore}}
                删除
            
            
                
                
                
                
                
                
            
            
                
            
        
    

    
        var vm=new Vue({
            el:"#demo",//css选择器
            data:{
                //界面中Vue元素的相关数据
                title:"学生成绩表",
                Id:'',
                Name:'',
                ChineseScore:0.0,
                MathScore:0.0,
                SearchName:'',
                list:[
                    {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
                    {Id:102,Name:'小黄',ChineseScore:61,MathScore:47.5},
                    {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
                    {Id:104,Name:'小宋',ChineseScore:59,MathScore:97},
                ]
            },
            methods:{
                btnAdd(){
                var student={Id:this.Id,
                            Name:this.Name,
                            ChineseScore:parseFloat(this.ChineseScore),
                            MathScore:parseFloat(this.MathScore)
                        }
                this.list.push(student)
                this.Id='',
                this.Name='',
                this.ChineseScore=0,
                this.MathScore=0
                },
                del(i){
                    this.list.splice(i,1)
                },
                btnSearch(){
                    var Newstudent=[]
                    this.list.forEach(item => {
                        if(item.Name.indexOf(this.SearchName)!=-1){
                            Newstudent.push(item)

                        }
                    });
                    this.list=Newstudent
                }
            },
            computed:{
                ClassJudge:function(){
                    return function(val){
                        if(parseFloat(val)>85) { return {GT90:true,bold:true} }
                        if(val