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

问题描述

我是vue.js的新手.这是我的问题:

I'm new to vue.js. Here is my problem:

在* .vue文件中，如下所示:

In a *.vue file like this:

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

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

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

如何在background-color:中使用道具color(现在是?).

How can I use the props color in background-color: (where is a ? now).

谢谢.

推荐答案

您没有.您使用计算属性，然后使用prop返回div的样式，如下所示:

You don't. You use a computed property and there you use the prop to return the style of the div, like this:

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

这篇关于在vue.js组件中，如何在CSS中使用props?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！