uni-app同时设置静态class与动态对象格式class
时间: 2023-08-03 07:05:26 浏览: 76
在uni-app中,可以同时设置静态class与动态对象格式class。动态对象格式class可以通过在标签上使用v-bind:class指令,并将一个对象作为参数来设置。例如:
```html
<template>
<div class="static-class" :class="dynamicClass"></div>
</template>
<script>
export default {
data() {
return {
dynamicClass: {
'dynamic-class': true,
'other-class': false,
},
};
},
};
</script>
<style>
.static-class {
color: red;
}
.dynamic-class {
font-size: 20px;
}
.other-class {
border: 1px solid black;
}
</style>
```
在上面的例子中,div标签同时设置了静态class为"static-class"和动态对象格式class为{ 'dynamic-class': true, 'other-class': false },静态class设置了文字颜色为红色,动态对象格式class设置了字体大小为20px。其中,'dynamic-class'为真,因此会应用该class样式;'other-class'为假,因此不会应用该class样式。
需要注意的是,动态对象格式class中,键名为class名称,键值为布尔值,表示是否应用该class样式。
阅读全文