vue获取json数据后怎么动态添加到tbody中？

Question

下面那段标签是动态生成的tr和td，用jquery是直接append到表格的tbody中，但是用vue的话应该怎么写呢？用组件渲染吗？

    var str=`
           <tr>
           <td class="num"></td>
           <td class="result-content">${txt}</td>
           <td class="pos-st">(${points[0]},${points[1]})</td>
           <td class="pos-st">(${points[2]},${points[3]})</td>
           <td class="pos-st">(${points[4]},${points[5]})</td>
           <td class="pos-st">(${points[6]},${points[7]})</td>
           <tr>`;

         

Answer 1

给td加个循环，通过数据来驱动dom节点的增减
html：

<tr>
           <td class="num"></td>
           <td class="result-content">${txt}</td>
           <div v-for="(item,index) in list">
           <td  class="pos-st">({list[index]},{list[index+1]} </td>
           <div>
           <tr>

js:

 var app = new Vue({
        el: '.home',
        data: {
            list:[]
            }})
  mounted: function () {
 //这里控制list的内容，
            this.data.list[0]=111
            this.data.list[1]=222
            this.data.list[2]=333
        }            

以上是伪代码，只代表整体思路，体会意思就行

Answer 2

指令 v-for 啊

Answer 3

参考一下吧

<table class="table-list">
                  <thead>
                  <tr>
                      <th style="width:16%">序号</th>
                      <th style="width:16%;">校区</th>
                      <th style="width:16%;">班级</th>
                      <th style="width:16%;">老师</th>
                      <th style="width:16%;">学生人数</th>
                      <th style="width:16%;">观看时长</th>
                  </tr>
                  </thead>
                  <tbody>
                    <tr v-if="(stu_list[0].school_name)?true:false" v-for="(res,idx) in stu_list" :key="res.id">
                        <td>{{idx + 1}}</td>                
                        <td>{{res.school_name}}</td>
                        <td>{{res.class_name}}</td>
                        <td>{{res.user_name}}</td>
                        <td>{{res.student_num}}</td>
                        <td>{{res.watch_time}}</td>
                    </tr>
                  </tbody>
              </table>

Answer 4

vue是数据驱动视图，所以要尽量改变熟悉的操作DOM的方法，只需操作data里的数据即可达到想要的效果。这里用v-for去渲染列表就行了，代码如下(最好加上key)：

 //td较少的情况

 //HTML
 <table border="1" cellspacing="0" cellpadding="0">
       <tr v-for="(item,index) of content" :key="index">
           <td>index为{{index}},星宿：{{item.star}}</td>
           <td>index为{{index}},头衔：{{item.honor}}</td>
           <td>index为{{index}},姓名：{{item.name}}</td>
       </tr>
 </table>


  //JS
    var app = new Vue({
    el:"#table",
    data:{
        content:[
            {
                star:"天卫星",
                honor:"双鞭",
                name:"呼延灼"
            },
            {
                star:"天英星",
                honor:"小李广",
                name:"华融"
            },
            {
                star:"天贵星",
                honor:"小旋风",
                name:"柴进"
            }
        ]
    }
})

如果tr和td都很多，且数据的组成结构合理，可以使用嵌套循环：

//HTML
 <table border="1" cellspacing="0" cellpadding="0">
       <tr v-for="(item,index) of content">
           <td v-for="(t_item,key,t_index) of item">index为{{index}},{{key}}：{{t_item}}</td>
       </tr>
 </table>


//JS
    var app = new Vue({
    el:"#table",
    data:{
        content:[
            {
                star:"天卫星",
                honor:"双鞭",
                name:"呼延灼"
            },
            {
                star:"天英星",
                honor:"小李广",
                name:"华融"
            },
            {
                star:"天贵星",
                honor:"小旋风",
                name:"柴进"
            }
        ]
    }
})