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

CSS

西里A

2020-03-11

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

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

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

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

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

我该如何使用道具（现在color在background-color:哪里?）。

谢谢。

第750篇《在vue.js组件中，如何在CSS中使用props？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

蛋蛋斯丁 2020.03.11

为什么不:style以这种方式使用prop：

<template>
  <div :style="{ backgroundColor: color }">
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    }
  }
}
</script>

确保以camelCase样式定义css属性。

达蒙斯丁 2020.03.11

您实际上可以！

您应该在计算属性中定义CSS变量，然后将计算属性作为需要CSS变量的元素的样式来调用，最后可以在文档底部的标记中使用该变量。

在这里看看：https : //codepen.io/richardtallent/pen/yvpERW/