vuejs v-bind:样式边距-右工作，而不是边距-左

Question

因此，当我执行以下操作时，我在其中一个div元素上使用:style时遇到了问题：

:style="(index + 1) % 2 == (0) && type.Liste.length === indexVin + 1 ? `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem);` : null"

这种情况会发生，因为您可以看到style属性为空

​

​

但是，如果我将margin-left更改为margin-right或padding-left，它就能正常工作

​

​

​

​

我在here上读到margin-left应该在camelCase里，但我试过了，什么也没改变，奇怪的是margin-right或padding-left都在烤肉盒里，而且工作得很好。

我不认为它来自我的速记，因为，当我将css设置为除margin-left以外的任何内容时，它又一次起作用了，我还尝试删除了div上的任何其他css源(所以只应用了我在这里设置的源)，但也不起作用。

我的解决方案已经用完了，是的，我绝对需要它成为一种边际而不是填充

编辑:这里有更多的代码，最奇怪的事情发生了，我的console.log工作得很好，在需要的时候触发，但是出于某种原因，如果我在我的if(even)中放了margin left，当它进入else if(odd)时它不工作，margin left也是如此，但是在相反的方向上，margin right只有在if(even)中才能工作，你知道为什么吗？

​

methods : {
    computedStyle(index , type , indexVin ) {
      if ((index + 1) % 2 == (0) && type.Liste.length === indexVin + 1) {
        console.log('even and last')
        return `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem);`
      } else if (type.Liste.length === indexVin + 1) {
        console.log('odd and last')
        return `margin-right : calc((100% - (100% / ${type.Liste.length})) + 6rem);`
       // return `'margin-left' : calc((100% - (100% / ${type.Liste.length})) - 6rem);`
       //  return 'background-color : red'
      } else {
        console.log('nothing special')
        return null
      }
    },
}

<div class="padding-block-1" v-for="(type , index) in TypesDeVins" :key="index">
      <div class="tw-flex tw-items-end slider-top"
           :class="[LeftOrRight(index) , FlexDirection(index)]">
        <div class="colonnes-resp-2 tw-flex-shrink-0" :class="LeftOrRightMargin(index , 2)">
          <h4 class="tw-uppercase tw-font-bold text-1-2 letter-spacing-3"
              :class="ColorTitle(index)">Les appellations</h4>
          <h2 class="tw-uppercase tw-text-white tw-font-bold text-2-4 tw-mb-12 letter-spacing-4">{{ type.Nom }}</h2>
        </div>
        <div class="swiper-container" :class="`slider-top-${index}`" :dir="rtl(index)">
          <div class="swiper-wrapper">
            <div class="nom-vin swiper-slide" v-for="(vin , indexVin) in type.Liste"
                 :key="indexVin"
                 :class="slideDir(index)"
                 :style="computedStyle(index , type , indexVin)"
                 >
              <h3 class="tw-text-white tw-font-bold tw-uppercase letter-spacing-3 text-1-2 tw-pb-12">{{ vin.title.rendered }}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>

​

Answer 1

该文档首先展示了一个使用对象https://vuejs.org/v2/guide/class-and-style.html的样式绑定

下面是文档中的一个示例：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"

尝试一下，也可以将该样式作为计算属性来使用，以帮助实现可读性和调试。

模板：

<div :style="computedStyle(index)"></div>

脚本：(这需要添加到computed中，而不是方法中)。

computedStyle() {
  const listeLength = this.TypesDeVins[index].Liste.length;
  return index => {
    return (index + 1) % 2 == (0) && listeLength === indexVin + 1
        ? {'margin-left' : `calc((100% - (100% / ${listeLength})) + 6rem)`} 
        : null;
  }}

以下是一些注意事项：

• 此类型应位于计算中，而不是方法中。
• 您收到的错误是正确的，在我的示例中类型未定义
• 类型是TypesDeVins数组中的单个项
• 我创建了一个常量，以便直接定义您在

中键入的值

如果需要的话，我建议在这里加入一个调试器来单步执行代码，以确保值按照您所期望的那样通过。

基于您的新代码：

computed : {
  computedStyle() {
    return (index, indexVin) => {
      const listeLength = this.TypesDeVins[index].Liste.length;
      const spacing = `calc((100% - (100% / ${listeLength})) + 6rem)`;
      if ((index + 1) % 2 == (0) && listeLength === indexVin + 1) return {'margin-left' : spacing};
      if (listeLength === indexVin + 1) return {'margin-right' : spacing};

      return {};
    }
  }
},

密切关注如何在计算的中使用参数