如何在按钮下面输出所提交图书的相关信息？(标签-分类|关键词-file)

Question

利用vue创建表单 ，通过表单绑定实现创建图书的功能，图书的属性包括书名（text）、作者（text）、单价（text）、所属分类(select，option内容自定)、封面（file）、简介（textarea）、是否出版（checkbox）。单击“创建”按钮，在按钮下面输出所提交图书的相关信息。

Answer 1

回答引用自GPT-4o，由博主小ᶻZ࿆编写，若还有疑问可评论或留言：

Vue实现图书信息创建与展示

题主希望在Vue中实现一个表单，用于创建图书信息并在点击“创建”按钮后显示提交的图书详细信息，包括书名、作者、价格等。

实现步骤

1. 创建表单结构

   • 表单包含书名、作者、单价、分类（下拉框）、封面（文件上传）、简介、是否出版（复选框）等字段。
   • 使用v-model双向绑定字段值。

2. 提交事件处理

   • 在“创建”按钮的点击事件中，收集表单数据并显示在指定区域。

3. 完整代码示例

   <template>
     <div>
       <h2>图书信息创建</h2>
       <form @submit.prevent="createBook">
         <label>书名：</label><input type="text" v-model="book.title" /><br/>
         <label>作者：</label><input type="text" v-model="book.author" /><br/>
         <label>单价：</label><input type="text" v-model="book.price" /><br/>
         <label>分类：</label>
         <select v-model="book.category">
           <option value="小说">小说</option>
           <option value="科技">科技</option>
           <option value="历史">历史</option>
         </select><br/>
         <label>封面：</label><input type="file" @change="onFileChange" /><br/>
         <label>简介：</label><textarea v-model="book.description"></textarea><br/>
         <label>是否出版：</label><input type="checkbox" v-model="book.published" /><br/>
         <button type="submit">创建</button>
       </form>
       <div v-if="submitted">
         <h3>提交的图书信息：</h3>
         <p><strong>书名：</strong> {{ book.title }}</p>
         <p><strong>作者：</strong> {{ book.author }}</p>
         <p><strong>单价：</strong> {{ book.price }}</p>
         <p><strong>分类：</strong> {{ book.category }}</p>
         <p><strong>简介：</strong> {{ book.description }}</p>
         <p><strong>是否出版：</strong> {{ book.published ? '是' : '否' }}</p>
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         book: {
           title: '',
           author: '',
           price: '',
           category: '',
           description: '',
           published: false,
           cover: null
         },
         submitted: false
       };
     },
     methods: {
       createBook() {
         this.submitted = true;
       },
       onFileChange(event) {
         this.book.cover = event.target.files[0];
       }
     }
   };
   </script>
   

代码解析

• 双向绑定：使用v-model实现表单字段与book对象的双向绑定。
• 提交事件：当点击“创建”按钮时，将submitted设为true，并在页面上展示图书详细信息。

如有帮助，题主可以帮忙采纳一下嘛，谢谢~