如何添加以下样式作为此 Vue 组件的道具

Question

如何添加以下样式作为组件的 props？

        <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 作为 props 和 prev。 .next 类颜色和背景颜色？

Answer 1

当您只想使用道具设置标签样式时，我会这样做

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

如果你想动态添加 css 类，你可以像 here 描述的那样使用对象

在你的模板中

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

在你的组件中

data: {
  isActive: true,
  hasError: false
}

你也可以使用计算的属性来动态地做到这一点