Vue.js(7)：v-if、v-else-if、v-else、v-show、v-for

　　v-if和v-show功能差不多，区别在于v-if如果不显示就注释掉了，而v-show则是通过style="display: none;"来隐藏的，另外v-show不支持v-else和。　

    
    
    
    Vue.js-V-if、V-show、v-for
    
    
        [v-cloak]{
            display: none;
        }
    


    

        ----------------V-if和V-show 显示与隐藏
        
{{info}}  --  v-if
        
{{info}}  --  v-show
        {{ isDisplayed?'点击隐藏':'点击显示' }} 
        
        ----------------V-if   v-else-if    v-else
        
输入字符A看到
        
输入字符B看到
        
输入字符C看到
        
以上条件都不满足显示
        　你的输入值：{{sTemp}}
        
        ----------------V-for显示数组数据 (注意：要习惯性地加上:key，唯一值)
        

            

                {{item.id}}--{{item.Name}}--{{item.ChineseScore}}-{{item.MathScore}}
            
        
        
        ----------------V-for显示对象数据
        

            

                {{key}}--{{val}}--{{i}}
            
        
        
        ----------------V-for显示列表数字
        

            

                {{i}}--{{count}}
            
        
    
    
    
        //数据
        var VueDataObj={
            info:'Vus.js',
            sTemp:'B',
            isDisplayed:true,
            studentList:[
                    {Id:101,Name:'小明',ChineseScore:81.5,MathScore:87},
                    {Id:102,Name:'小宋',ChineseScore:61,MathScore:47.5},
                    {Id:103,Name:'小丽',ChineseScore:89.5,MathScore:83},
                ],
            loginUser:{Id:1,name:'陆军',type:'操作员'},
        };
        //方法
        var methods={
            changeDisplayStatus(){
                this.isDisplayed=!this.isDisplayed;
            },
            valueChange(e){
                console.log(this.iTemp);
                console.log(e.target.value);
            },
        };
        //计算属性
        var computed={};
        //监听
        var watch={};
        //Vue应用对象
        var vm=new Vue({
           el:'#demo',
           data:VueDataObj,
           methods,
           computed,
           watch,
       })
   

　　显示图：