昨天學習v-for語法是以render一組標籤來作範例，那如果遇到需要一次render不只一組標籤呢？
假設想render出來的結構長這樣：

<div id="app">
  <h3>title1</h3>
  <p>paragraph</p>
  <h3>title2</h3>
  <p>paragraph</p>
  .
  .
  .
 
  <!--這樣是一組-->
 <!--
  <h3></h3>
  <p></p>
  -->
</div>

也就是說沒有要在h3與p的外面再包一層tag的時候怎麼做呢？
這時候可以使用Vue的一個模板叫<template>：

<div id="app">
  <template v-for="(item ,key) in todo">
    <h3>{{key}}</h3>
    <p>{{item}}</p>
  </template>
</div>

vue實體：

//js
  <script>
    new Vue({
      el: "#app",
      data: {
        todo: {
          morning: '吃飯',
          evening: '睡覺',
          night: '打東東'
        }
      }
    });
  </script>

輸出結果：

<div id="app">
  <h3>morning</h3>
  <p>吃飯了吃飯了吃飯了吃飯了吃飯了</p>
  <h3>evening</h3>
  <p>睡覺了睡覺了睡覺了睡覺了睡覺了</p>
  <h3>night</h3>
  <p>打東東打東東打東東打東東打東東打東東</p>
</div>

有沒有發現外面包的<template>是不會被render出來的，所以當需要輸出不只一個元素時，可以搭配<template>作使用。