Vue 生成后台纵列表格并获取用户输入数据

<p><template>/n  <div>/n    <div class='input-container'>/n      <label>输入数据：</label>/n      <input type='text' v-model='inputData' />/n      &lt;button @click='generateTable'&gt;生成</button>/n    </div>/n    <table v-if='tableData.length > 0'>/n      <thead>/n        <tr>/n          <th>序号</th>/n          <th>数据</th>/n        </tr>/n      </thead>/n      <tbody>/n        <tr v-for='(item, index) in tableData' :key='index'>/n          <td>{{ index + 1 }}</td>/n          <td>{{ item }}</td>/n        </tr>/n      </tbody>/n    </table>/n  </div>/n</template>/n/n<script>/nexport default {/n  data() {/n    return {/n      inputData: '',/n      tableData: []/n    };/n  },/n  methods: {/n    generateTable() {/n      // 将输入的数据按空格分割成数组/n      const data = this.inputData.trim().split(//s+/);/n      // 更新表格数据/n      this.tableData = data;/n    }/n  }/n};/n</script>/n/n<style>/n.input-container {/n  margin-bottom: 20px;/n}/n/ntable {/n  border-collapse: collapse;/n  width: 100%;/n}/n/nth, td {/n  border: 1px solid #ccc;/n  padding: 10px;/n  text-align: center;/n}/n</style>/n/n在这个示例中，我们首先定义了一个包含一个输入框和一个生成按钮的表单。当用户点击生成按钮时，我们将输入的数据按空格分割成一个数组，并将其赋值给表格数据，然后使用 <code>v-for</code> 指令将表格数据渲染到表格中。如果表格数据为空，则不显示表格。/n/n需要注意的是，这个示例中的代码只是一个简单的示例，并没有对用户输入的数据进行安全性检查和验证，请在实际开发中根据具体情况进行处理。</p>