VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式、Style样式一、背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue的样式问题,一直以来这一块自己也没有好好的总结过,特此总结。二、栗子思路,主要是在data、methods、computed三个地方定义变量、方法或者计算属性来给出指定的背景。(1)css动态样式(dat
·
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)
更多推荐
所有评论(0)