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 ://v2.vuejs.org/v2/guide/list.html

您需要采取以下步骤：

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

 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 样式的弹性框或基于网格的布局。

柔性

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

 #app { display: flex; flex-wrap: wrap; } .entry { flex: 1 0 25%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> <div v-for="entry in entries" class="entry">{{ entry }}</div> </div>

网格

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

 #app { display: grid; grid-template-columns: repeat(4, 1fr); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> <div v-for="entry in entries" class="entry">{{ entry }}</div> </div>