css中v-bind使用

Particular12.

于 2022-11-16 16:46:58 发布

阅读量264

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.youkuaiyun.com/renfeideboke/article/details/127888411

版权

本文展示了如何在Vue的模板中利用`<style>`标签内的`v-bind`指令将JavaScript反应式变量与CSS样式结合，实现动态颜色绑定。通过`reactive`创建的`state`对象，`color`属性的改变会实时反映到`.text`类的文本颜色上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-bind() in CSS

 <template>
        <div class="text">hello</div>
    </template>

    <script setup>
        import { reactive } from 'vue'
        const state = reactive({
            color:red,
        })
    </script>

    <style>
        .text {
            color: v-bind('state.color');
        }
    </style>