將 class 添加到頂部 object int 動態變化對象列表

Question

我有一個元素可以對所有對象進行 v-，我有 css class 頂級{} ...我想在呈現的 object 中動態添加頂級對象 [0]頂部必須刪除。

關於如何做到這一點的任何幫助？

這是代碼，在元素中你可以看到 class

<section class="tiles">
        <article v-for="(item, key) in objects" :class="top-class (if its top object)">
                <span class="image">
                    <img src="images/pic01.jpg" alt="" />
                    </span>
                    <a @click="method">                 
                                          <h2>{{item.title}}</h2>
                    <div class="content">
                <p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
                        </div>
                    </a>
        </article>

<script>
    export default {
       computed: {
           top-class() {



           }
       }
    }
  </script>

Answer 1

動態 Class

我假設您確實需要計算，並且它將返回各種 class 名稱。 （你很可能不會。）

• 讓我們稱之為topClass ，沒有破折號，它更容易。

• 目前尚不清楚objects是對象數組還是 object hash 對象，所以我會給出兩個答案。 如果objects是：

大批

<article v-for="(item, index) in objects" :class="{ [topClass]: index === 0 }">

Object （使用第三個v-for參數index ）

<article v-for="(item, key, index) in objects" :class="{ [topClass]: index === 0 }">

class綁定中的[ ]括號是 es2015 計算屬性，允許動態引用鍵。

這是一個演示。

---

Static Class

另一方面，如果 class 名稱不是動態的，則根本不需要計算。 你可以這樣做：

大批

<article v-for="(item, index) in objects" :class="{ 'top-class': index === 0 }">

Object （使用第三個v-for參數index ）

<article v-for="(item, key, index) in objects" :class="{ 'top-class': index === 0 }">