Vue中动态绑定class和style

动态绑定class

1. 静态写法
   可与下面动态绑定class方式共存

   <div id="root">
   	<p class="basic">这是一段文字</p> // p标签上最终的class包括： basic
   </div>
   

2. 字符串写法
   一般适用于类名单一且不确定的情况

   <div id="root">
   	<p class="basic" :class="className">这是一段文字</p> // p标签上最终的class包括： basic、mt10
   </div>
   

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			className: 'mt10'
   		}
   	}
   });
   

3. 数组写法
   一般适用于类名和个数都不确定的情况

   <div id="root">
   	<p class="basic" :class="classArr">这是一段文字</p> // p标签上最终的class包括： basic、mt10、mb10、pb20
   </div>
   

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			classArr: ['mt10', 'mb10', 'pb20']
   		}
   	}
   });
   

4. 对象写法
   一般适用于类名、个数确定，但是否使用不确定的情况

   <div id="root">
   	<p class="basic" :class="classObj">这是一段文字</p> // p标签上最终的class包括： basic、mt20
   </div>
   

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			classObj: {
   				mt20: true,
   				mb30: false
   			}
   		}
   	}
   });
   

动态绑定内联style

1. 静态写法

   <div id="root">
   	<p style="font-size: 20px; color: red;">这是一段文字</p>
   </div>
   

2. 对象写法

   <div id="root">
   	<p :style="styleObj">这是一段文字</p>
   </div>
   

   new Vue({
   	el: '#root',
   	data: function () {
   		return {
   			styleObj: {
   				fontSize: '20px',
   				color: 'red'
   			}
   		}
   	}
   });
   

3. 数组写法（不常用）

   <div id="root">
   	<p :style="[styleObj1, styleObj2]">这是一段文字</p>
   </div>
   

   new Vue({
   	el: 'root',
   	data: function () {
   		return {
   			styleObj1: {
   				'font-size': '12px',
   				 color: 'red'
   			},
   			styleObj2: {
   				backgroundColor: 'yellow'
   			}
   		}
   	}
   });