如何将Vue应用程序示例挂载到HTML中div容器并使用v-for指令进行迭代？

daolsyd0 于 2023-02-24 发布在 Vue.js

关注(0)|答案(4)|浏览(183)

这是我的js，我已经完成了

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" },
    ],
  },
});

我的CSS

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px;
  min-width: 30px;
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

我想将Vue应用程序示例挂载到一个div容器中，并使用v-for指令迭代列和行数组，以生成表头和表体，我应该怎么做？
我用的是这个vue版本<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
预期成果：

ID      Full Name      Phone
1       Test Name 1    587-917-1241
2       Test Name 2    250-682-3553
3       Test Name 3    707-848-0782

vue.js

来源：https://stackoverflow.com/questions/75511752/how-to-mount-vue-app-instance-to-a-div-container-in-html-and-use-v-for-directive

4条答案

按热度按时间

wj8zmpe11#

你可以像这样在js中编写你的模板字符串：

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" },
    ],
  },
  template: `
    <table>
      <thead>
        <tr>
          <th v-for="(value, key) in column" :key="key">{{ value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.phone }}</td>
        </tr>
      </tbody>
    </table>
  `,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

赞(0）回复(0）举报 2023-02-24

6xfqseft2#

var app = Vue.createApp({

  data() {
    return{
      column: {
         id: "ID",
         name: "Full Name",
         phone: "Phone",
      },
      rows: [
         { id: 1, name: "Test Name 1", phone: "587-917-1241" },
         { id: 2, name: "Test Name 2", phone: "250-682-3553" },
         { id: 3, name: "Test Name 3", phone: "707-848-0782" },
       ],
     },
  }
}).mount('#app');

你可以这样写

赞(0）回复(0）举报 2023-02-24

mlmc2os53#

以下是在HTML元素中挂载Vue应用程序的示例-

<html>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th v-for="(value, key) in column" :key="key">{{ value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.phone }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app', //Tells Vue to render in HTML element with id "app"
      data() {
        return {
          column: {
        id: "ID",
        name: "Full Name",
        phone: "Phone",
      },
      rows: [
        { id: 1, name: "Test Name 1", phone: "587-917-1241" },
        { id: 2, name: "Test Name 2", phone: "250-682-3553" },
        { id: 3, name: "Test Name 3", phone: "707-848-0782" },
      ],
        }
      }
    });
  </script>
</html>

赞(0）回复(0）举报 2023-02-24

qyyhg6bp4#

您几乎已经完成了，只需查看此List Rendering文档。
现场演示**：**

new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" }
    ],
  },
});

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px;
  min-width: 30px;
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in column" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.phone }}</td>
      </tr>
    </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-02-24

我来回答

如何将Vue应用程序示例挂载到HTML中div容器并使用v-for指令进行迭代？

4条答案

相关问题

热门标签

最新问答