Vue3动态CSS

动态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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

动态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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module模式

• 单个样式

<template>
  <div :class="$style.div">
    动态css
  </div>
</template>

<script setup lang=ts>
import {ref} from 'vue'
</script>

<style module>
.div{
  color: red
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 多个样式

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 自定义名字

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

hooks使用

const css = useCssModule('zs');

console.log(css);
1
2
3

使用场景render或写txs使用