vue.js的template模板使用注意事项（vue2.x版本要求template模板内的元素必须在一个节点下）

日常修行

于 2019-07-31 09:42:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42609712/article/details/97886749

前端知识点专栏收录该内容

0 篇文章

订阅专栏

问题：

vue.js 定义一个template后，多行元素只显示第一行元素

解决方案

将多行元素放在一个div节点下就可以了，这是vue2.x版本后的要求

附代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

<template id="counter-template">
    <div>//vuejs 2.x 版本(1.x没这个要求)，template模板内容必须包裹在一个节点下面，否则只显示一个元素节点  cjh_20190731
        <h1>Hello World</h1>
        <button @click="count+=1">Submit{{count}}</button>
    </div>
</template>


<script>
    Vue.component('counter', {
        template: '#counter-template',
        data: function () {
            return {count: 0}
        }
    })
    new Vue({
        el: "#app"
    })
</script>

</body>
</html>