ループのためのvuejsの最初の要素にclass = "active"を入れる方法

私はvue.jsを学ぼうとしています。私は要素のリストを追加しています、私はclass="active"をforループの最初の要素に追加したいと思います。以下の私のコードです：ループのためのvuejsの最初の要素にclass = "active"を入れる方法

<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" 
       } 
      ] 
     } 
    } 
}

は私を助ける：

そして、次は私のスクリプトコードです。

出典

2017-02-27 Nitish Kumar

V-のために=「sliderContentsで（インデックス、sliderContent）」、その文ならば、インデックス0または私はVUEを知らない1. TBHにクラスを追加するために使用しますが、これはあなたが角度に行くものです。 –

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>

はあなたの問題を解決を実証スニペットあるクラスを追加することができます:first項目のリストを取得し、セレクタを使用できます。ここでの概要は次のとおりです。私たちは親スコープのプロパティへの完全なアクセス権を持っている

ブロックv-for内部。 v-forは、現在の項目のインデックスにオプションの2番目の引数もサポートしています。

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

v-forディレクティブは、あなたの項目のインデックスを与える二番目の引数を持っています。

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

あなたはindexが0である場合、式のテストを使用して、クラス属性にバインドすることができ、最初の項目にactiveクラスをしたいので。

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

出典

2017-02-27 14:16:34 wing

偉大な答え。ありがとう。 –

インデックスが数値ではなく文字列の場合はどうなりますか？どのように私は同じ結果を達成することができますか？ – Glen

@Glen：_index_が文字列の場合は、配列ではなくオブジェクトを反復処理していると仮定します。 'v-for'を使ってオブジェクトを反復するとき、' index'引数はオブジェクトの 'v-for ="（value、key、index）の3番目の位置にあります。オブジェクトが最初のものであるかどうかをテストするclass属性。ただし、注記：**オブジェクトを反復処理する場合、順序は 'Object.keys（）'のキーの列挙順序に基づいています。 JavaScriptエンジンの実装** – wing

-1

あなたはあなたのタグにJqueryを記載しました。あなたはそれを使用することが許可されていると思います。あなたは、単にあなたが上active

$(document).ready(function(){ 
    $('.item:first').addClass('active'); 
})

出典

2017-02-27 14:07:09 Nicolas

大変申し訳ございません。間違いだった私はjqueryでやる方法を知っています。 –

それに加えて、私はvue.jsを知らないので、それをさらに助けることはできません。 – Nicolas

ループのためのvuejsの最初の要素にclass = "active"を入れる方法

答えて

関連する問題