uniapp 动态绑定class添加样式穿透
时间: 2023-08-04 14:04:36 浏览: 60
在Uniapp中,动态绑定class可以通过以下方式实现:
1. 将class定义为一个变量,然后在模板中使用{{}}绑定变量,如下所示:
```
<template>
<div class="{{className}}">Hello World</div>
</template>
<script>
export default {
data() {
return {
className: 'my-class'
}
}
}
</script>
```
2. 在模板中使用三元表达式,根据条件动态绑定class,如下所示:
```
<template>
<div :class="isRed ? 'red' : 'blue'">Hello World</div>
</template>
<script>
export default {
data() {
return {
isRed: true
}
}
}
</script>
```
至于样式穿透,可以使用>>>或者/deep/选择器来实现。例如:
```
<template>
<div class="parent">
<div class="child">Hello World</div>
</div>
</template>
<style scoped>
.parent >>> .child {
color: red;
}
</style>
```
或者:
```
<template>
<div class="parent">
<div class="child">Hello World</div>
</div>
</template>
<style scoped>
.parent /deep/ .child {
color: red;
}
</style>
```
这样就可以将样式穿透到子组件中。需要注意的是,/deep/选择器在Sass/Less中可能会失效,建议使用>>>选择器。