vue scss中使用动态的JS变量

最新推荐文章于 2025-04-22 18:30:41 发布

zhengshaofeng1

最新推荐文章于 2025-04-22 18:30:41 发布

阅读量6.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：个人博文文章标签： vue javascript sass

本文链接：https://blog.csdn.net/zhengshaofeng1/article/details/107631371

个人博文专栏收录该内容

14 篇文章

订阅专栏

在这里插入图片描述

<template>
    <div>
        <span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span>
    </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            list: [
                { text: '"中"', color: 'red' },
                { text: '"华"', color: 'orange' },
                { text: '"人"', color: 'yellow' },
                { text: '"民"', color: 'orange' },
                { text: '"共"', color: 'green' },
                { text: '"和"', color: 'cyan' },
                { text: '"国"', color: 'blue' }
            ]
        };
    }
};
</script>

<style lang="scss" scoped>
span::after {
    content: var(--text);
    background-color: var(--color);
}
</style>