主页 / 问题 / 1085474
Accepted
slobodianiukvitali
Asked:2020-02-21 05:59:56 +0000 UTC2020-02-21 05:59:56 +0000 UTC

通过输入创建对象并在页面上显示该对象

  • 772

通过输入创建对象并在页面上显示

<div class="form-group">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model.trim="userId">
  </div>
  <div class="form-group">
    <label for="id">id</label>
    <input type="text" id="id" v-model.number="id">
  </div>
  <div class="form-group">
    <label for="title">title</label>
    <input type="text" id="title" v-model.number="title">
  </div>
  <div class="form-group">
    <label for="body">body</label>
    <input type="text" id="body" v-model.number="body">
  </div>

  <button @click="create">Create</button>
  <ul>
    <li></li>
  </ul>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

vue.js

1 个回答

  1. Best Answer

    例如像这样：

    new Vue({
  el: '#app',
  data: {
    userId: '',
    id: '',
    title: '',
    body: '',
    myUsers: []
  },
  methods: {
    create() {
      const {userId, id, title, body} = this.$data;
      this.myUsers.push({
        userId,
        id,
        title,
        body
      });
    }
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div class="form-group">
    <label for="userId">userId</label>
    <input type="text" id="userId" v-model.trim="userId">
  </div>
  <div class="form-group">
    <label for="id">id</label>
    <input type="text" id="id" v-model.number="id">
  </div>
  <div class="form-group">
    <label for="title">title</label>
    <input type="text" id="title" v-model.number="title">
  </div>
  <div class="form-group">
    <label for="body">body</label>
    <input type="text" id="body" v-model.number="body">
  </div>

  <button @click="create">Create</button>
  <ul>
    <li :key="user.id" v-for="user in myUsers">{{user}}</li>
  </ul>
</div>

    • 2

相关问题