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)