web-dev-qa-db-ja.com

class = "active"をvuejs forループの最初の要素に配置する方法

私はvue.jsを学ぼうとしています。要素のリストを追加しています。class="active" forループの最初の要素のみ。以下は私のコードです：

<div class="carousel-inner text-center " role="listbox">
    <div class="item" v-for="sliderContent in sliderContents">
        <h1>{{ sliderContent.title }}</h1>
        <p v-html="sliderContent.paragraph"></p>
    </div>
</div>

したがって、最初の要素は次のようになります。

<div class="item active">
    <h1>WELCOME TO CANVAS</h1>
    <p>Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas</p>
</div>

データを取得できるので、すべてが完璧に機能しています。

次に、スクリプトコードを示します。

<script>
export default{
    data() {
        return {
            sliderContents: [
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                },
                {
                    title: "WELCOME TO CANVAS",
                    paragraph: "Create just what you need for your Perfect Website. Choose from a wide<br>range of Elements & simple put them on your own Canvas"
                }
            ]
        }
    }
}

手伝ってください。

javascriptvuejs2vue.js
14
Nitish Kumar
const TextComponent = {
  template: `
    <p>{{ text }}</p>
  `,
  
  props: ['text'],
};

new Vue({
  components: {
    TextComponent,
  },
  
  template: `
    <div>
      <text-component
        v-for="(item, index) in items"
        :class="{ 'active': index === 0 }"
        :text="item.text">
      </text-component>
    </div>
  `,
  
  data: {
    items: [
      { text: 'Foo' },
      { text: 'Bar' },
      { text: 'Baz' },
    ],
  },
}).$mount('#app');
.active {
  background-color: red;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>

上記は、問題の解決策を示すスニペットです。その概要は次のとおりです。

v-forブロック内には、親スコーププロパティへのフルアクセスがあります。 v-forは、現在のアイテムのインデックスのオプションの2番目の引数もサポートします。

– https://vuejs.org/v2/guide/list.html#Basic-Usage

v-forディレクティブには、アイテムのインデックスを指定する2番目の引数があります。

v-for="(item, index) in items"

最初のアイテムにactiveクラスが必要なため、indexが0かどうかをテストする式を使用して、クラス属性にバインドできます。

:class="{ 'active': index === 0 }"
29
Wing

最も簡単な解決策は、indexが0に等しい場合にすべての要素をチェックし、activeクラス（または必要なクラス）を設定することです。クラス定義のコードは次のとおりです。

:class="{ 'active': index === 0 }"

以下は、Bootstrap Tabs：

<ul class="nav nav-tabs tab-nav-right" role="tablist">
    <li role="presentation" :class="{ 'active': index === 0 }" v-for="(value, index) in some_array" v-bind:key="index">
        {{some_array[index]}}
    </li>
</ul>

また、複数のクラスがある場合は、次のように混合できます。

:class="['tab-pane fade', (index === 0 ? 'active in' : 'something_else')]"
5
Brane