Vue.js可以在没有根元素的情况下模板，也可以为两个div指定vue

Question

HTML：

<div class="a">
   Some HTML ...
</div>
<div class="b">
   Some HTML
</div>

使用Javascript：

new Vue({
    el: "#item_info",
    ....
    ....
    (Other Config)
    ....
    ....
})

上面的两个div需要显示来自vue的信息，

我尝试使用<template></template>，如：

<template>
   (my two div)
</template>

但它不起作用，因为两个div都需要在根元素内。

我知道如果我将html修改为：

<div id="item_info">
   <div class="a"></div>
   <div class="b"></div>
</div>

它可以工作，但我无权修改基本的Html结构

还有其他方法可以帮我解决吗？

Answer 1

也许您应该尝试将这些div分成两个组件，然后将它们添加到父组件中。

One.vue

<template>
    <div class="a">
       Some HTML ...
    </div>
</template>

Two.vue

<template>
    <div class="b">
       Some HTML
    </div>
</template>

Three.vue

<template>
    <One></One>
    <Two></Two>
</template>

Answer 2

如果您没有授权，那么我认为您也不能<template></template>。 Vue JS不允许选择多个元素。但您可以使用Vue组件，请参阅Vue JS的这个官方链接：https://vuejs.org/v2/guide/components.html。

但请记住，Component也需要一个根元素。