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

您所在的位置：网站首页 › vue动态绑定样式的所有方式 › VUE动态绑定Css样式、Style行内样式

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

#VUE动态绑定Css样式、Style行内样式| 来源: 网络整理| 查看: 265

VUE动态绑定Css样式、Style样式一、背景

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

二、栗子

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

2323 切换 export default{ data(){ return{ isCheck:true } }, methods:{ changeBg(){//改变背景 this.isCheck = !this.isCheck } } } .bgOne{ background-color: red; } .bgTwo{ background-color: green; }

在这里插入图片描述点击切换按钮切换背景（2）css动态样式（methods）

{{item}} export default{ data(){ return{ } }, methods:{ selectBg(i){ if((i+1)%3==1){ return true }else{ return false } } } } .bgOne{ background-color: red; } .bgTwo{ background-color: green; } .bgThree{ background-color: blue; }

效果展示：在这里插入图片描述（3）css动态样式（computed）

2323 export default{ data(){ return{ } }, methods:{ }, computed:{ setBg(){ return true } } } .bgOne{ background-color: red; }

在这里插入图片描述（4）行内style动态样式（data数据）

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

在这里插入图片描述点击切换按钮切换背景（5）行内style动态样式（methods）

{{item}} 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' } } } }

效果展示：在这里插入图片描述（6）行内style动态样式（computed）

2234 export default{ data(){ return{ } }, computed:{ bgColor(){ return 'green' } } }

在这里插入图片描述

三、总结

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

【本文地址】

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

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

今日新闻

推荐新闻