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。将 return 对象绑定到 style 属性

的方法

您可以通过将 <li> 元素的 style 属性绑定到接受其索引的方法来实现。在方法中，你return一个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>