Vue使用样式

class

<!-- <h1 class="red thin">这是一个很大很大的标题</h1>  -->
<!--第一种使用方式：直接传递数组-->
<!--这里的class使用 -bind进行绑定-->
<h1 :class="['red', 'thin']">这是一个很大很大的标题</h1> 
<!--在数组中，使用三元表达式-->
<h1 :class="['red', 'thin', flag ? 'active': '']">这是一个很大很大的标题</h1> 
<!--在数组中使用对象的方式来替代三元表达式-->
<h1 :class="['red', 'thin', {'active': flag}]">这是一个很大很大的标题</h1> 
<!--直接使用，在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可贷引号，可以不带引号-->
<h1 :class="[{red: true, thin: false}]">这是一个很大很大的标题</h1>

style

<div id="app">
   <h1 :style="{color: 'red', 'font-weight': 200}">这是一个很大很大的标题</h1>
   <!--指定单个-->
   <h1 :style="styleObj">这是一个很大很大的标题</h1>
   <!--指定多个-->
   <h1 :style="[styleObj, styleObj2]">这是一个很大很大的标题</h1>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
		  styleObj: {color: 'red', 'font-weight': 200},
		  styleObj2: {'font-style': 'italic'}
		},
		methods: {

		}
	}); 
</script>	

以上是针对在VueJs中如何使用样式的使用方式的总结。