vue.js / v-for: Как оформить HTML в зависимости от индекса списка - PullRequest
Новая
       35

vue.js / v-for: Как оформить HTML в зависимости от индекса списка

0 голосов
/ 09 апреля 2019

У меня есть список, из которого я хочу оформить элементы по-разному, в зависимости от их индексов: 

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

Если item достигает индексов 4 и 5, я хочу, чтобы оно было <strong>. Как правильно использовать v-if или indexof в этом случае?

Или я должен пойти с динамическими классами в этом случае?

1 Ответ

1 голос
/ 09 апреля 2019

Есть несколько способов сделать это:

1.Привязать метод, который возвращает объект, к атрибуту style

. Это можно сделать, связав атрибут <li> элемента *1006* с методом, который принимает его индекс.В методе вы возвращаете 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>
...