Vue3可以直接使用v-bind绑定

noxLiu

于 2023-03-06 16:36:16 发布

阅读量207

点赞数

分类专栏： SASS 文章标签： css

原文链接：https://blog.youkuaiyun.com/qq_39998026/article/details/126298645

版权

SASS 专栏收录该内容

5 篇文章

订阅专栏

<template>
    <div class="content" ref="content">
        <div class="title">这是一个标题</div>
    </div>
    <button @click="changeBgColor">修改背景颜色</button>
</template>
 
<script>
    export default {
        name: 'DEMO',
        data() {
            return {
                themeColor: 'red'
            }
        },
        methods: {
            changeBgColor() {
                this.themeColor = 'pink';
            },
        }    
    }
</script>
 
<style lang="scss">
    .content {
        width: 100%;
        height: 200px;
        background-color: v-bind('themeColor');
    }
</style>