Question

我是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:（现在是?）。

感谢。

Answer 1

你没有。您使用计算属性，并使用prop返回div的样式，如下所示：

let indexesToBeRemoved: Set = [2, 4]

numbers = numbers
    .enumerated()
    .filter { !indexesToRemove.contains($0.offset) }
    .map { $0.element }
and result

Answer 2

就像现在的2020年一样，我建议将此技巧与CSS函数var

一起使用

<template>
    <div id="a" :style="cssVars"></div>
</template>

<script>
export default {
    props: ['color'],
    computed: {
      cssVars () {
        return{
          /* variables you want to pass to css */
          '--color': this.color,
        }
    }
}
<script>

<style scoped>
#a{
    background-color: var(--color);
}
</style>

此方法非常有用，因为它允许您稍后通过css更新传递的值（例如，当您应用悬停事件时）。

credit

Answer 3

您实际上可以！

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

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

some code to make the link work.

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

Answer 4

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

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

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

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

Answer 5

如果您需要样式属性（例如伪类或媒体查询）无法应用的css，请执行以下操作：

初始化Vue时创建一个全局可用的样式组件（否则将需要使用它，否则会遇到掉毛问题）。它创建一个样式标签，该标签仅呈现广告位中的内容：

仅当您确实需要在css和css功能中同时使用不能应用于样式属性的动态值时，才使用此功能。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.component('v-style', {
  render: function(createElement) {
    return createElement('style', this.$slots.default)
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后像这样在模板顶部使用它，您将获得组件的完整JavaScript范围和完整的CSS语法：

<template>
  <v-style>
    @media screen and (max-width: 820px) {
      .gwi-text-media-{{ this.id }} {
        background-image: url({{ mobileThumb }});
      }
    }
  </v-style>
</template>

对我来说似乎有点棘手，但这确实可以做到，在某些情况下，我宁愿这样，而不是必须为鼠标悬停或调整大小的事件添加额外的JS，而这可能会降低您的应用程序性能

Answer 6

您可以利用CSS var(--foo-bar)函数。如果您尝试传递具有自己动态路径的资产（如Shopify那样），它也很有用。

此方法还可以为:before和:after元素设置样式，因为它们返回引用应用于owner元素的样式。

使用原始帖子示例传递颜色：

<template>
  <div
    id="a"
    :style="{ '--colour': color }">
  </div>
</template>

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

<style scoped>
  #a {
    background-color: var(--colour);
  }
<style>

使用原始帖子示例传递URL：

<template>
  <div
    id="a"
    :style="{ '--image-url': 'url(' + image + ')' }">
  </div>
</template>

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

<style scoped>
  #a {
    background-url: var(--image-url);
  }
<style>

Source

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

6 个答案: