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>