Как добавить следующие стили в качестве реквизита для этого Vue компонента - PullRequest
Новая
       4

Как добавить следующие стили в качестве реквизита для этого Vue компонента

0 голосов
/ 20 января 2020

Как я могу добавить следующие стили в качестве реквизита для компонента? 

        <template>
        <div>
            <transition-group name='fade' tag='div'>
             ...
          </div>
        </template>

        <script>
        export default {
          name: 'Slider',
          data() {
            return {

            }
      props: { intervalVal: Number,
               width...
 },
          },
        </script>

    styles>

div {
width: 100% 
height: 600px
}

.prev,
.next {
color #fffff
background-color:#22222

Как я могу поставить div и height как реквизиты, так и как prev. Цвет следующего класса и цвета фона?

1 Ответ

0 голосов
/ 20 января 2020

когда вы хотите стилизовать ваш тег только с помощью prop, я бы сделал это с 

<div :style="`width: ${this.width}`">

Если вы хотите динамически добавлять css классы, вы можете использовать для него объекты, как описано здесь

в вашем шаблоне 

<div v-bind:class="{ active: isActive }"></div>

и в вашем компоненте 

data: {
  isActive: true,
  hasError: false
}

вы также можете использовать вычисленные свойства, чтобы сделать это динамически

...