VUE动态绑定Css样式、Style样式

一、背景

这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了，因为uniapp的语法是vue的语法，所以uniapp的样式问题主要也就是vue的样式问题，一直以来这一块自己也没有好好的总结过，特此总结。

二、栗子

思路，主要是在data、methods、computed三个地方定义变量、方法或者计算属性来给出指定的背景。
（1）css动态样式（data数据）

<template>
	<view>
		<view :class="{bgOne:isCheck,bgTwo:!isCheck}">2323</view>
		<button @click="changeBg">切换</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isCheck:true
			}
		},
		methods:{
			changeBg(){//改变背景
				this.isCheck = !this.isCheck
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
	.bgTwo{
		background-color: green;
	}
</style>

点击切换按钮切换背景
（2）css动态样式（methods）

<template>
	<view>
		<view v-for="(item,index) in ['A','B','C']" :class="{bgOne:selectBg(index),bgTwo:selectBg(index+1),bgThree:selectBg(index+2)}">{{item}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		methods:{
			selectBg(i){
				if((i+1)%3==1){
					return true
				}else{
					return false
				}
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
	.bgTwo{
		background-color: green;
	}
	.bgThree{
		background-color: blue;
	}
</style>

效果展示：

（3）css动态样式（computed）

<template>
	<view>
		<view :class="{bgOne:setBg}">2323</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		methods:{
		},
		computed:{
			setBg(){
				return true
			}
		}
	}
</script>

<style >
	.bgOne{
		background-color: red;
	}
</style>

（4）行内style动态样式（data数据）

<template>
	<view>
		<view :style="{backgroundColor:bgColor}">2323</view>
		<button @click="changeBg">切换</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				bgColor:'green'
			}
		},
		methods:{
			changeBg(){//改变背景
				this.bgColor= 'red'
			}
		}
	}
</script>

<style >

</style>

点击切换按钮切换背景
（5）行内style动态样式（methods）

<template>
	<view>
		<view v-for="(item,index) in ['A','B','C']" :style="{backgroundColor:selectBg(index)}">{{item}}</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		methods:{
			selectBg(i){
				if((i+1)%3==1){
					return 'red'
				}else if((i+1)%3==2){
					return 'green'
				}else{
					return 'blue'
				}
			}
		}
	}
</script>

<style >

</style>

效果展示：

（6）行内style动态样式（computed）

<template>
	<view>
		<view :style="{backgroundColor:bgColor}">2234</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
			
			}
		},
		computed:{
			bgColor(){
				return 'green'
			}
		}
	}
</script>

<style >

</style>

三、总结

（1）加bind的符号“:”
（2）