如何在Vue中将颜色作为props发送？

Question

这是我的Vue按钮对象。我想根据props更改颜色。

<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>

但是它没有编译通过。

- TSR

---

请检查此链接是否有帮助：https://dev59.com/4VgQ5IYBdhLWcg3wXyxv - Anuradha Kumari

Answer 1

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

我认为你可以看一下这篇文章：https://alligator.io/vuejs/dynamic-styles/

他们详细解释了你想要做的事情。

- Robson Braga