动态样式组件
我试图创建动态样式的组件,通过从JavaScript变量设置CSS值,而不使用文档Web API,我的意思是像Document.getElementById()
和Document.querySelector()
这样的方法。
我用的是Vue. JSbtw,我得到了一个代码,看起来像这样:
<template>
<div class="badge-container" :style="myStyle">
<slot></slot>
</div>
<template>
<script>
setup(props) {
const myStyle = ref(`--color: ${props.color}`)
return{myStyle}
}
</script>
<style>
.badge-container::after {
background-color: var(--color);
}
</style>
- 它工作正常**,但只适用于一个变量,&我想使用多个变量,我如何从JS传递多个变量到CSS。
我试着把myStyle转换成一个对象来传递多个值,但是失败了。我可以把所有的样式都像这样
但是问题是这样的div样式会改变,我想在**.badge-container::after
之后改变**:
有没有办法做到这一点,不使用文档Web API或JSX。
1条答案
按热度按时间i1icjdpr1#
您可以使用Vue 3的此功能:v-bind-in-css
这样您就可以根据实际状态获得完全动态的样式
就像这个操场上所展示的。