vue中的样式语法

内联语法

用:style="{}“的方式按原生格式添加样式,如:style=”{color:‘red’,fontWeight:‘bold’ }"

<p :style="{color:'greenyellow',fontWeight:'bold' }">内联语法</p>

对象语法

这种语法是最常用的语法，格式为:class="{样式:真假}"，当为真时添加样式，当为假时移除样式。

<style type="text/css">
	.add_active {
		color: greenyellow;
	}
	
	.add_bigsize {
		font-size: 30px;
	}
</style>
 
<!-- 添加了颜色样式，但是字体没有放大 -->
<p :class="{add_active:true,add_bigsize:false}">对象语法</p>

（注）对象语法中的真假可与vue实例中data的值绑定，如

另外，对象语法还可以把整个样式对象设到data中：如

<style type="text/css">
	.add_active {
		color: greenyellow;
	}
	
	.add_bigsize {
		font-size: 30px;
	}
</style>
 
<!-- 添加了颜色样式，但是字体没有放大 -->
<p :class="objectClass">对象语法2</p>
 
<script>
	var vue = new Vue({
		el: "#app",
		data: {
			objectClass: {
				add_active: true,
				add_bigsize: false
			}
		}
	});
</script>

对象语法样式还可以通过vue实例的computed计算出来，如：

<style type="text/css">
	.add_active {
		color: greenyellow;
	}
</style>
 
<!-- 添加了颜色样式，但是字体没有放大 -->
<p :class="objectComputed">对象语法3</p>
 
<script>
	var vue = new Vue({
		el: "#app",
		data: {
			//对象语法
			isActive: true
		},
		computed: {
			objectComputed: function() {
				return {
					add_active: this.isActive && this.isActive == true //优先级低于data设值，即上一个例子
				}
			}
		}
	});
</script>