uniapp进行css动态变化

最新推荐文章于 2025-09-24 09:42:35 发布

原创最新推荐文章于 2025-09-24 09:42:35 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #css #前端

前端专栏收录该内容

9 篇文章

订阅专栏

文章讲述了如何利用Vue.js中的数据绑定和计算属性(computed)来动态改变按钮颜色。具体做法是通过绑定style变量，根据applyStatus的状态在预先定义的颜色数组中查找对应的颜色值，然后将找到的颜色赋值给按钮背景色。

css动态变化

我的场景是获取applyStatus，然后根据applyStatus的状态，使得按钮的颜色发生变化

实现方式如下：

1、元素添加style变量，然后使用{} ，并将自己需要改变的样式和变量使用key,value的模式编写

<view class="join_button" :style="{'background-color':bcolor}"  @click="join">{{applyName}}</view>

2、定义颜色数组

applyColors: [{
						value: -1,
						label: "#009ad6"
					},
					{
						value: 0,
						label: "yellow"
					},
					{
						value: 1,
						label: "green"
					},
					{
						value: 2,
						label: "red"
					}
				]

3、使用computed解析变量

这句话的意思是，在applyColors数组中进行查找，如果找到对应的value，则返回其label

  computed: {
			bcolor:{
				get() {
					return this.applyColors.find((x) => x.value === this.applyStatus).label;
				},
				set(newValue) {
					return newValue;
				}
			},
		},