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）