VUE3 , input里面输入内容点击添加按钮会添加到表格中作为新数据

在Vue3中，为了实现在input中输入内容并点击按钮添加到表格中作为新数据的功能，你可以按照以下步骤创建一个简单的示例：

首先，安装Vue CLI并创建一个新的项目。然后，在`App.vue`或其他合适的组件中，构建以下结构：

<template>
  <div>
    <input v-model="newData" placeholder="请输入内容">
    <button @click="addData">添加</button>
    <table>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.content }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建一个用于保存新数据的ref
const newData = ref('');

// 定义表头数据
const tableData = ref([]);

// 添加数据的方法
function addData() {
  // 检查输入是否为空
  if (newData.value.trim()) {
    // 将新数据推入tableData数组
    tableData.value.push({ content: newData.value });
    // 清空输入框
    newData.value = '';
  }
}
</script>

在这个例子中，我们使用`v-model`双向绑定将输入框的内容绑定到`newData`上。当点击“添加”按钮时，`addData`函数会被触发，如果输入不为空，就将其添加到`tableData`数组中，并清空输入框。

记得在你的main.js中引入Vue，并使用Vue.createApp注册你的组件：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');