vue.js - 如何在 Vue 中发送颜色作为道具？

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>

但它没有编译

标签： vue.jsvue-component

Answer 1

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

我想你可以看看那篇文章https://alligator.io/vuejs/dynamic-styles/

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