Vue js 从 HTML 输入字段获取信息并使用此数据创建新表 [关闭]

Question

嘿，我的技术热情的朋友们！

我不知道从哪里开始 - 我已经花了好几个小时才找到解决方案。我想要一个简单的 HTML 表格，其中可以动态添加元素，我想通过 Vue js 来做到这一点。整个事情应该通过简单的输入字段和添加按钮来完成，但我不知道如何读取数据。我现在对 vue js 有所了解，但我不太明白。代码不多，所以如果有人可以帮助我提供这个方向的示例，我会很高兴。只是一个表格，您可以在其中添加之前通过输入字段输入的数据。

提前致谢

Answer 1

首先你需要创建一个表单和一个表格来显示它：

new Vue({
  el: "#app",
  data: {
  	user: {
    	name: '',
    	age: ''
    },
    users: [],
  },
  methods: {
  	submitForm: function(){
    	users.push(user)
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <div class="form">
    <form v-on:submit.prevent="onSubmit">
      <span>Name</span>
      <input type="text" v-model="user.name">
      <span>age</span>
      <input type="text" v-model="user.age">
      <input type="submit" onClick=onSubmit() />
    </form>
  </div>
  
  <table>
    <tr v-for="user in users">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
    </tr>
  </table>
</div>