vue.js / v-for：如何根据列表索引设置html样式

Question

我有一个列表，我想根据项目的索引以不同的方式设置项目的样式：

<ul>
    <li 
    v-for="(item, index) in myList()" 
    :key="index">{{item}}
    </li>
</ul>

如果item到达索引4和5，我希望它是<strong>。在这种情况下，如何正确使用v-if或indexof？

还是在这种情况下应该使用动态类？

Answer 1

有几种方法可以做到这一点：

1。绑定将对象返回到style属性的方法

您可以通过将<li>元素的style属性绑定到接受其索引的方法来实现。在该方法中，您返回一个合适的CSSStyleDeclaration对象。例如，如果i为4或5，则将fontWeight设置为粗体：

new Vue({
  el: '#app',
  methods: {
    myList: function() {
      return ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet', 'Foo', 'Bar', 'Baz'];
    },
    listItemStyle: function(i) {
      var style = {};
      
      if (i === 4 || i === 5) {
        style.fontWeight = 'bold';
      }
      
      return style;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(item, index) in myList()"
      :style="listItemStyle(index)"
      :key="index">
      {{item}}
    </li>
  </ul>
</div>

2。使用<component>确定是否应渲染<strong>标签

这不是我的首选方法，因为我个人更喜欢绑定样式，而不是使用DOM元素来决定外观。但是，如果您想使用<strong>而不是设置font-weight: bold，则可以简单地利用<component is="[tag]">方法来决定要呈现的HTML标记：

new Vue({
  el: '#app',
  methods: {
    myList: function() {
      return ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet', 'Foo', 'Bar', 'Baz'];
    },
    tag: function(i) {
      if (i === 4 || i === 5) {
        return 'strong';
      }
      
      return 'span';
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(item, index) in myList()"
      :key="index">
      <component v-bind:is="tag(index)">
        {{item}}
      </component>
    </li>
  </ul>
</div>