<div id="myPage">
      <h2>遊戲列表</h2>
      <table border="1">
        <tr>
          <td>編號</td>
          <td>遊戲名稱</td>
        </tr>
        <tr is="my-row1"></tr>
        <tr is="my-row2"></tr>
        <tr is="my-row3
 
"></tr>
        
        <!--
        這種寫法會導致格式錯亂內容不包含在tbody裡面
        <my-row1></my-row1>
        <my-row2></my-row2>
        <my-row3></my-row3>
        -->
      </table>
    </div>    

    <script>
      Vue.component('my-row1',{
        template:
 
'<tr><td>1</td><td>水滸Q傳</td></tr>'
      });
      Vue.component('my-row2',{
        template:'<tr><td>2</td><td>元氣騎士</td></tr>'
      });
      Vue.component('my-row3',{
        template:'<tr><td>3</td><td>戰魂銘人</td></tr>
 
'
      });

      var myPage = new Vue({
        el:'#myPage',
        data:{
          
        },
        methods:{

        },
      })
    </script>

效果展示：