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