vue中报错: Component template should contain exactly one root element

最新推荐文章于 2023-07-27 22:46:16 发布

JohnKeatinghhh

最新推荐文章于 2023-07-27 22:46:16 发布

阅读量1.1k

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_41604040/article/details/109435594

版权

Vue学习笔记专栏收录该内容

14 篇文章 4 订阅

订阅专栏

vue中报错: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

今天写练习的时候遇到一个问题：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <test></test>
    </div>
    <script>
        Vue.component('test',{
            template:`
                <p>卢本伟牛逼</p>
                <p>干死黄旭东</p>
            `
        })
        var vm = new Vue({
            el:'#app'
        })
    </script>

</body>

</html>

在这里插入图片描述
原因是因为，component是要当作一个标签使用的，所以一个component对应一个唯一的根元素，像下面这样，用一个div标签包裹两个p标签就好了。

        Vue.component('test',{
            template:`
            <div>
                <p>卢本伟牛逼</p>
                <p>干死黄旭东</p>
            </div>
            `
        })

JohnKeatinghhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中报错: Component template should contain exactly one root element

vue中报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.今天写练习的时候遇到一个问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录