vue table 1

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th v-for="key in columns"> {{ key }} </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="entry in data">
            <td v-for="key in columns"> {{ entry[key] }} </td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="script.js"></script>
  </body>
</html>



new Vue({
  el: "#app",
  data: {
    columns: ['gender', 'email','phone'],
    data: [],
    url: "https://randomuser.me/api/?results=5"
  },
  created: function() {
    this.getUsers();
  },
  methods: {
    getUsers: function() {
      axios.get(this.url).then(res => {
        this.data = res.data.results;
      }).catch(function(error) {
        alert(error)
      })
    }
  }
});


body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}
table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}
th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -user-select: none;
}
td {
  background-color: #f9f9f9;
}
th,td {
  min-width: 120px;
  padding: 10px 20px;
}