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

西里A2020-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:哪里?）。

谢谢。

蛋蛋斯丁2020/03/11 17:21:24

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

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

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

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

达蒙斯丁2020/03/11 17:21:24

您实际上可以！

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

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

some code to make the link work.

并在这里：https : //github.com/vuejs/vue/issues/7346

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer