在 vue.js 组件中，如何在 css 中使用 props

发布于03月18日

我是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:号props color(现在是?号).

谢谢你.

推荐答案

不需要.使用计算(computed)属性，然后使用prop返回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>