Vue 样式的动态绑定 style class 的相关应用

style的相关知识

<template>
	<div class="style">
		<p>通过（对象）布尔值绑定一个或多个</p>
        <p :class="{'bg_red':true,'color_green':0==0,'bg_red':bool}">
			class  样式通过布尔值设置
			key 值做类名，布尔值实现类名的增删
			动态样式主要用于条件判断实现类名的增删
		</p>
		<p :class="Font_size">
            在对象里面有类名：布尔
			动态样式主要用于条件判断实现类名的增删
		</p>
		<p>通过数组实现类名绑定</p>
		<p :class="[newbg_red,color_green]">
			相当于样式bg_red样式在div中重命名 为newbg_red
		</p>
		<P :class="['1==1'?baseclass:newbg_red,newbg_red]">
			三目运算符  实现的是类名的重命名  也可以实现多个类名
		</P>
		对象显示样式
		<hr/>
		<p :style="{'color':'white',background:(0==0?color:'#000')}" :class="classObject" @click="go_back">
			通过 style 添加样式 对象里面使用三目运算符
		</p>
		<p :style="styleColor">
			绑定data对象
			Vue 在data里面显示样式 
		</p>
		<p :style="{color:color,fontSize: fontSize + 'px' }">
			变量显示样式   拼接字符串
		</p>
		数组显示样式
		<hr/>
		<p :style="[bg,co]">
			数组里面显示多个样式
		</p>
		<p :style="[{color:'white'},{background:(0==0?color:'#000')}]">
			数组里面可以有多个对象  三目运算符的用法
		</p>
		<p>
		   style  多重值的用法
			html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
		</p>
	</div>
</template>

<script>
	export default{
		name:'Style',
	data(){
			return{
				bool:true,
				Font_size:{
					Font_size:true
				},
				newbg_red:'bg_red',
				color_green:'color_green',
				baseclass:'baseclass',
				isActive:true,
				styleColor:{
					color:'red',
					textAlign:'center'
				},
				color:'red',
				fontSize:'20',
				bg:{
					background:'black'
				},
				co:{
					color:'white'
				}
			}
		}，
		methods:{
			
		},
		computed:{
			classObject: function () {
				return {
				  active: this.isActive,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg_red{
		background: red;
		margin-bottom: 10px;
	}
	.color_green{
		color: darkgreen;
	}
	.Font_size{
		font-size:40px;
	}
	.baseclass{
	  text-align: center;
	}
	.active{
		text-align: center;
	}
</style>