SOURCE

<div id="exercise">
	<div>
		<div>
			<button @click="starteffect">start Effect</button>
        </div>
        <div id="effect" v-bind:class="effectclass"></div>
    </div>
    <div>
        <!--用数组将属性绑定在一起-->
        <p v-bind:class="['blue',{float},'text-color']">I got not class :(</p>
    </div>
    <div>
        <input type="text" v-model="str">
        <!-在str中连接css中的属性-->
        <div v-bind:class="[{visble:true},str]"></div>
    </div>
    <div>
        <input type="text"  v-model="str">
        <br>
        <input type="text" v-model=" isVisalbe">
        <div  v-bind:class="[{visble:isVisalbe},str]"></div>
    </div>

    <div>
       <input type="text" v-model="myStyle.backgroundColor">
        <div v-bind:style="myStyle"></div>
    </div>
    <div>
        <button>Start progress</button>
        <div v-bind:class="['progress-bar']"></div>
    </div>
</div>


<script>
    new Vue({
        el:"#exercise",
        data:{
            effectclass:{
                highlight:false,
                shrink:true,
            },
            float:'left',
            str:'',
            isVisalbe:true,
            myStyle:{
                width:'100px',
                height:'150px',
                backgroundColor:'gray',
            }

        },
        methods:{
            starteffect:function(){
                //setInterval() 
                //方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
                var vm=this;
                setInterval(function(){
                    //改变文本亮度
                    vm.effectclass.highlight=!vm.effectclass.highlight,
                    vm.effectclass.shrink=!vm.effectclass.shrink

                },1000);
            }
        }
    });
</script>

#effect{
    width:100px;
    height: 100px;
    border:1px solid black; 

}

.highlight{
    background-color: red;
    width:100px !important;/*取消覆盖*/
    
}
.shrink{
    background-color: grey;
    width:50px !important;
}
.blue{
    background-color:blue;
}
/*文字浮动*/
.float{
    float:right;
}
.text-color{
    color:yellow;
}
.visble{
    width:100px;
    height:100px;
}
.red{
  background-color:red;  
}
.progress-bar{
    width:'200px';
    height: '20px';
    border: 1px solid black;
}