Question

这是我的Button Vue对象。我想根据道具改变颜色

<template>
    <div class="get-started-btn flex center"
         style="cursor: pointer;
            padding: 0px 15px;
            height: 36px;
            color: {{color}} ">
            {{text}}
    </div>
</template>

<script>
    export default {
        name: "Button",
        props:{
            text:String,
            color: String,
            backgroundColor: String,
        }
    }
</script>

<style scoped>
.get-started-btn{
    background-color: {{backgroundColor}};
}
</style>

例如：

    <Button text="Mark As Done" color="white" backgroundColor="#1cb86e"></Button>

或

  <Button text="Get Started" color="white" backgroundColor="#299ff6"></Button>

但是它没有编译

Answer 1

<Button text="Get Started" :style="{ 'background-color': YOURCOLORVARIABLEHERE }"></Button>

我想您可以看一下该文章https://alligator.io/vuejs/dynamic-styles/

他们准确地解释了你想做什么。

如何在Vue中发送颜色作为道具？

1 个答案: