将类添加到动态更改对象列表中的顶部对象

Question

我有一个元素，它将为所有对象 v-，我有 css 类 top-class{ } …我想在渲染对象中动态添加顶级类，它是 object[0] 并且它动态变化，所以必须移除旧的顶部。

有什么帮助吗？

这里是代码，在元素中你可以看到类

<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

动态类

我假设您确实需要计算，并且它会返回各种类名。 （你很可能不会。）

• 我们称之为topClass，没有破折号，更容易。

• 尚不清楚objects 是对象数组还是对象的对象哈希，所以我会给出两个答案。如果objects 是：

数组

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

对象（使用第三个v-for 参数index）

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

class 绑定中的 [ ] 括号是 es2015 computed properties，它允许动态引用键。

这是demo。

---

静态类

另一方面，如果类名不是动态的，则根本不需要计算。你可以这样做：

数组

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

对象（使用第三个v-for 参数index）

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