动态css值

<template><div class="div">动态css</div>
</template><script setup lang=ts>
import {ref} from 'vue'const style = ref('blue')
</script><style scoped>
.div{color: v-bind(style)
}
</style>

动态css对象

<template><div class="div">动态css</div>
</template><script setup lang=ts>
import {ref} from 'vue'const style = ref({color:'blue'
})
</script><style scoped>
.div{color: v-bind('style.color')
}
</style>

module模式

• 单个样式

<template><div :class="$style.div">动态css</div>
</template><script setup lang=ts>
import {ref} from 'vue'
</script><style module>
.div{color: red
}
</style>

• 多个样式

<template><div :class="[$style.div,$style.border]">动态css</div>
</template><script setup lang=ts>
import {ref} from 'vue'
</script><style module>
.div{color: red
}
.border{border: 1px solid #ccc
}</style>

• 自定义名字

<template><div :class="[zs.div,zs.border]">动态css</div>
</template><script setup lang=ts>
import {ref} from 'vue'
</script><style module="zs">
.div{color: red
}
.border{border: 1px solid #ccc
}</style>

hooks使用

const css = useCssModule('zs');console.log(css);

使用场景render或写txs使用