Vue循环 - 仅适用于#id但不适用.class？

我都用相同的数据呈现两套HTML元素的，所以我用类选择：Vue循环 - 仅适用于#id但不适用.class？

<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。

来源

2017-10-11 laukok

在猜测，当通过一个CSS选择器，'el'属性仅选择找到的第一个。 Vue不会将单个实例安装到多个根元素 – Phil

你的代码试图做的是在相同的页面上设置相同的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

来源

2017-10-11 23:22:23

Vue循环 - 仅适用于#id但不适用.class？

回答

相关问题