Vue-demo1

进度条 及变图

    
    
    
    

  
    


    
    

    
    

        

    
    
    

        变身
        还原
    
    
    

new Vue({
    el:"#vue-app",
    data:{
        percent:100,
        ended:false,
    },
    methods:{
        change: function(){
            this.percent -= 10;
            if( this.percent <= 0){
                this.ended = true;
            }
        },
        restart: function(){
            this.percent = 100;
            this.ended = false;
        }
        
    },
    computed:{
    
    }   
});

#beauty{
    height: 400px;
    width: 400px;
    margin:0 auto;
    background: url(1.jpg) center no-repeat;
    background-size: 80%;  
}

#beauty.turn{
    background: url(2.jpg); center no-repeat;
}
#beauty-percent{
    
    width: 320px;
    margin:10px auto 1px;
    border: 2px solid #000;
}

#beauty-percent div{
    height: 20px;
    background-color: red;  
}
#control{
    width: 200px;
    margin:10px auto;
    
}

#control button{
    margin-left: 30px;
}