ビューループ - ＃idでは動作しますが、.classでは動作しません？

Question

Iが同じデータをレンダリングするHTML要素の二組を持っているので、私はクラスセレクタ使用：それが唯一の第1のセットをループ

var example1 = new Vue({ 
    el: '.example-1', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' } 
    ] 
    } 
}) 

：

<ul class="example-1"> 
    <li v-for="item in items"> 
    {{ item.message }} 
    </li> 
</ul> 

<div class="example-1"> 
    <div v-for="item in items"> 
    {{ item.message }} 
    </div> 
</div> 

マイVueのコードをhtml（ul/li）ですが、ではなく、の2番目のセット（div）です。

なぜでしょうか？

どうすればとすることができますか？？

hereのコードを＃idに変更しました。

Answer 1

あなたのコードがしようとしているのは、同じVueインスタンス変数を同じページに2つの別々の場所に設定しても動作しないことです。 idを持つ1つの要素にすべてのvueコードを入れる必要があります。 Vueはその要素のインスタンスを開始し、その下のすべてのコードに反応します。あなたは次のようにコードを変更した場合、それは動作します：

<div id="example-1"> 
    <ul class="example-2"> 
    <li v-for="item in items"> 
     {{ item.message }} 
    </li> 
    </ul> 
    <div class="example-1"> 
    <div v-for="item in items"> 
     {{ item.message }} 
    </div> 
    </div> 
</div> 

var example1 = new Vue({ 
    el: '#example-1', 
    data: { 
    items: [ 
     { message: 'Foo' }, 
     { message: 'Bar' } 
    ] 
    } 
}) 

そしてここでは、ワーキングペンです： https://codepen.io/egerrard/pen/GMBKRX

次の2つの別々のインスタンスを望んでいた場合、あなたはそれを行うことができますが、あなたがする必要があると思います以下のペンのように2つのnew Vue()のインスタンスを作成します。

https://codepen.io/egerrard/pen/XeBrdp