- vue2：
<template>
<div
:style="userStyle"
class="word"
>
哈哈哈哈哈
</div>
</template>
<script>
export default {
data () {
return {
speed: 20
}
},
computed: {
userStyle () {
return {
"--speed": this.speed + 240 + "deg",
}
}
}
</script>
<style scoped>
.word {
animation: lunpan 1s steps(1, start);
animation-fill-mode: forwards;
}
@keyframes lunpan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(var(--speed));
}
}
</style>
- vue3(optional api)
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
- vue3(Composition API)
<template>
<div class="text">hello</div>
</template>
<script setup>
import { ref } from "vue";
const customTheme = ref({
color: 'red'
});
</script>
<style>
.text {
color: v-bind("customTheme.color");
}
</style>
