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>