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

vue学习 专栏收录该内容
4 篇文章 0 订阅

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)

  • 2
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值