在vue.js组件中，如何在css中使用道具？

Question

我是vue.js的新手。这里是我的问题：

在* .vue文件是这样的：

<template> 
    <div id="a"> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'SquareButton', 
    props: ['color'] 
    } 
</script> 

<style scoped> 
    #a { 
     background-color: ? 
    } 
<style> 

我如何使用道具background-color:color（其中一个是现在?）。

谢谢。

Answer 1

你不知道。您可以使用一个计算性能而使用道具返回div的风格，就像这样：

<template> 
    <div id="a" :style="style" @mouseover="mouseOver()"> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'SquareButton', 
    props: ['color'], 
    computed: { 
     style() { 
     return 'background-color: ' + this.hovering ? this.color: 'red'; 
     } 
    }, 
    data() { 
     return { 
     hovering: false 
     } 
    }, 
    methods: { 
     mouseOver() { 
     this.hovering = !this.hovering 
     } 
    } 
    } 
</script> 

<style scoped> 
<style>