Vuejs中使用component无法解析template的button标签

Question

如题，template中的button标签无法显示、

HTML代码如下

  <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <template id="counter-temp">
        <h1>Hello Vuejs!!</h1>
        <button>{{count}}</button>
    </template>

JS代码如下

Vue.component('counter',{
       template:'#counter-temp',
       
       data: function () {
        return {count: 0};
       }
      });
     new Vue ({
         el: '#app',
     });

Answer 1

vue的组件模板要求是单根，你的counter-temp不是单根，在h1和button外面套一个div就可以了。

<template id="counter-temp">
 <div>
  <h1>Hello Vuejs!!</h1>
  <button>{{count}}</button>
 </div>
</template>