VUE中数组中的数据表

Question

我正在尝试将此JavaScript代码转换为Vue JS ES5。这是显示表的Javascript：

window.addEventListener("load", function(){

  // simple array
  var data = ["cat", "mouse", "bird", "goat", "monkey", "giraffe","cow","donkey","mice", "camel", "elephant", "bufalo", "jade","zebra","goose","hen","zat"];
  // html table
  var perrow = 4, // 7 items per row
      html = "<table><tr>";
  // Loop through array and add table cells
  for (var i=0; i<data.length; i++) {
    html += "<td>" + data[i] + "</td>";
    // Break into next row
    var next = i+1;
    if (next%perrow==0 && next!=data.length) {
      html += "</tr><tr>";
    }
  }
  html += "</tr></table>";

  document.getElementById("container").innerHTML = html;
});

我如何转换为vue js。我的VUE代码是

<script type="text/javascript">
var appVM= new Vue({
     el:'#app',
mydata:{["cat", "mouse", "bird", "goat", "monkey", "giraffe","cow","donkey","mice", "camel", "elephant", "bufalo", "jade","zebra","goose","hen","zat"]; 
     },
</script>
<table id="myTable"  class="display table" width="100%">
  <tbody> 
  <tr v-for="data in mydata">
        <td> data to appear in this section</td>    
   </tr>
  </tbody>
</table>

Answer 1

通过阅读手册：https://vuejs.org/v2/guide/list.html

您需要执行以下步骤：

将表app命名为参考
1. 确保构造函数内的javaScript对象的语法正确。
2. 用对象包含键mydata的数组填充数据属性>
3. 用{{ data }}内的td调用项目的内容

var appVM = new Vue({
  el: '#app',
  data: {mydata : ["cat", "mouse", "bird", "goat", "monkey", "giraffe", "cow", "donkey", "mice", "camel", "elephant", "bufalo", "jade", "zebra", "goose", "hen", "zat"]}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app" class="display table" width="100%">
  <tbody>
    <tr v-for="data in mydata">
      <td> {{ data }}</td>
    </tr>
  </tbody>
</table>

Answer 2

我知道您要的是基于表的布局，但是由于数组实际上并不包含表格数据，因此我会改用CSS样式的flexbox或基于网格的布局。