Vue循環 - 僅適用於#id但不適用.class？

Question

我都用相同的數據呈現兩套HTML元素的，所以我用類選擇：

<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公司代碼：

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

只循環的第一套html（ul/li）但是不是第二組（div）。

任何想法爲什麼？

我該怎麼做都？

我修改了上面的代碼here，它使用#id。

Answer 1

你的代碼試圖做的是在相同的頁面上設置相同的Vue實例變量兩個獨立的地方，這是行不通的。你需要把你所有的vue代碼放到一個帶有id的周圍元素中。 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

如果你想兩個獨立的情況下，你可以這樣做，但你需要創建兩個new Vue()實例如以下筆：

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