В компоненте vue.js, как использовать реквизит в css?

Я новичок в 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: (где теперь находится ?).

Спасибо.

Ответы

Ответ 1

Нет. Вы используете вычисляемое свойство, и там вы используете опцию, чтобы вернуть стиль 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>

Ответ 2

Вы действительно можете!

Вы должны определить переменные CSS в Computed Property, затем вызвать вычисляемое свойство как атрибут стиля для элемента, для которого потребуется переменная CSS, и, наконец, вы можете использовать переменную в тегах внизу вашего документа.

Посмотрите здесь: https://codepen.io/richardtallent/pen/yvpERW/

some code to make the link work.

и здесь: https://github.com/vuejs/vue/issues/7346

Ответ 3

Если вам нужен 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 для наведения мыши или изменения размера, которые имеют большой потенциал для снижения производительности вашего приложения.

Ответ 4

Почему бы просто не использовать :style опору так:

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

Убедитесь, что вы определили свойства CSS в стиле camelCase.