首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Vue.js可以在没有为两个div指定根元素或vue el的情况下进行模板

Vue.js可以在没有为两个div指定根元素或vue el的情况下进行模板
EN

Stack Overflow用户
提问于 2017-08-19 17:57:16
回答 2查看 6.7K关注 0票数 1

HTML:

代码语言:javascript
代码运行次数:0
运行
复制
<div class="a">
   Some HTML ...
</div>
<div class="b">
   Some HTML
</div>

Javascript:

代码语言:javascript
代码运行次数:0
运行
复制
new Vue({
    el: "#item_info",
    ....
    ....
    (Other Config)
    ....
    ....
})

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

我尝试使用<template></template>,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<template>
   (my two div)
</template>

但是它不起作用,因为两个div都需要在根元素中。

我知道如果我将我的html修改为:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="item_info">
   <div class="a"></div>
   <div class="b"></div>
</div>

它可以工作,但我没有修改基本Html结构的权限

有没有其他方法可以帮助我解决这个问题?

EN

回答 2

Stack Overflow用户

发布于 2017-08-20 17:25:50

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

One.vue

代码语言:javascript
代码运行次数:0
运行
复制
<template>
    <div class="a">
       Some HTML ...
    </div>
</template>

Two.vue

代码语言:javascript
代码运行次数:0
运行
复制
<template>
    <div class="b">
       Some HTML
    </div>
</template>

Three.vue

代码语言:javascript
代码运行次数:0
运行
复制
<template>
    <One></One>
    <Two></Two>
</template>
票数 2
EN

Stack Overflow用户

发布于 2017-08-19 18:33:00

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

但是记住组件也需要一个根元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45770145

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档