vue修改组件样式，并动态绑定样式

效果：修改u-collapse-item组件的下标题颜色，并设置成动态的。
在这里分享一下过程，希望能给各位一个思路

我们先找到样式部分。
这里存在两个标注起来的地方

data-v-xxxx：是样式 scope 配置的

scoped用于在组件中使用局部作用域的 CSS 样式。
使用 scoped，你可以在一个组件中使用相同的类名或标签名，并将其应用于不同的元素，但这些元素样式不会相互干扰。也就是说，scoped 属性实现了局部作用域的 CSS，保证了样式代码的私密性和独立性。
当你使用 scoped 属性时，Vue.js 将在编译时自动为每个选择器添加一个唯一的属性，这个属性的值会和组件中的元素绑定在一起，从而保证了样式的局部作用域。但需要注意的是， scoped 并不是万能的，有些复杂的样式仍需要全局样式表来处理。

<style lang="scss" scoped>

u-cell__label ：组件的样式，我们现在就需要修改他。

深度选择器
（/deep/） stylus的样式穿透 使用：
（>>>） 通用的样式穿透
（::v-deep）

.fail {
		/deep/ .u-cell__label>span {
			color: #ff0000;
		}
	}

	.success {
		/deep/ .u-cell__label>span {
			color: #55aa00;
		}
	}

这是我写的两个设置颜色的样式，通过样式穿透进行设置。

接下来就是动态样式。

动态class写法：

:class=" {‘lanmu’:true,‘success’ : items.status === ‘1’,‘fail’:items.status === ‘2’}"
效果展示：