html - 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在这种情况下以正确的方式使用？

或者在这种情况下我应该使用动态类吗？

标签： htmllistvue.jsindexingv-for

Answer 1

做这件事有很多种方法：

style1.给属性绑定一个返回对象的方法

您可以通过将<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>