5.Vue-在Vue框架中实现Vue的增删改查

news2024/11/13 9:09:34

题记

        在vue框架中实现vue的增删改查,以下是具体操作流程和代码

编写TestView.vue文件

        TestView.vue文件如下: 

<template>

    <div id="app">

    <h1>学生列表</h1>

    <input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">

    <table>

      <thead>

        <tr>

          <th>姓名</th>

          <th>年龄</th>

          <th>操作</th>

        </tr>

      </thead>

      <tbody>

        <tr v-for="(student, index) in filteredStudents" :key="index">

          <td>{{ student.name }}</td>

          <td>{{ student.age }}</td>

          <td>

            <button @click="editStudent(index)">编辑</button>

            <button @click="deleteStudent(index)">删除</button>

          </td>

        </tr>

      </tbody>

    </table>

    <h2>添加/编辑学生</h2>

    <form @submit.prevent="saveStudent">

      <label>姓名:</label>

      <input type="text" v-model="newStudent.name" required>

      <label>年龄:</label>

      <input type="number" v-model="newStudent.age" required>

      <button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>

    </form>

  </div>

</template>

<script>

export default{

    data() {

      return{

        students: [

          { name: 'ng1', age: 18 },

          { name: 'ng2', age: 20 },

          { name: 'ng3', age: 22 }

        ],

        // 还定义了一个newStudent对象,用于存储正在添加或编辑的学生的临时数据

        // editingIndex变量用于记录正在编辑的学生的索引。

        // searchQuery变量用于存储用户输入的查询关键字。

        newStudent: {

          name: '',

          age: ''

        },

        editingIndex: null,

        searchQuery: ''

        }

       

      },

      // 在computed属性中,定义了一个名为filteredStudents的计算属性,

      // 它根据searchQuery的值对students数组进行过滤,

      // 如果searchQuery为空,则返回所有学生信息;否则,返回包含查询关键字的学生信息。

      computed: {

        filteredStudents() {

          if (this.searchQuery === '') {

            return this.students;

          } else {

            //使用Array的filter方法遍历students数组,并对每个学生对象的姓名进行判断

            //使用了箭头函数语法,表示对每个学生对象进行匿名函数的操作。

            //在函数体内部,使用了String的includes方法,

            //判断学生的姓名中是否包含了searchQuery属性的值(即用户输入的查询关键字)。

            //如果包含了,就将该学生对象保留在过滤后的数组中。

            return this.students.filter(student => {

              return student.name.includes(this.searchQuery);

            });

          }

        }

      },

      methods: {

        //saveStudent方法用于保存或更新学生信息。

        //通过判断editingIndex是否为null来确定当前是添加学生还是编辑学生的操作。

        //如果editingIndex为null,表示当前是添加学生的操作,将newStudent对象添加到students数组中。

        //如果editingIndex不为null,表示当前是编辑学生的操作,

        //将newStudent对象替换students数组中对应索引的学生信息。

        //将editingIndex重置为null,表示编辑操作已完成。

        //将newStudent对象重置为空对象,以清空输入框中的内容。

        saveStudent() {

          if (this.editingIndex === null) {

            // 添加学生

            this.students.push({ ...this.newStudent });

          } else {

            // 编辑学生

            this.students[this.editingIndex] = { ...this.newStudent };

            this.editingIndex = null;

          }

          this.newStudent = { name: '', age: '' };

        },

        //editStudent方法用于编辑学生信息。

        //当点击编辑按钮时,传入对应学生的索引作为参数。

        //在方法内部,将该学生的信息复制到newStudent对象中,以便在表单中显示出来。

        //同时,将editingIndex设置为该学生的索引,以标记当前正在编辑的学生。

        editStudent(index) {

          this.newStudent = { ...this.students[index] };

          this.editingIndex = index;

        },

        //在方法内部,使用splice方法从students数组中删除对应索引的学生信息。

        deleteStudent(index) {

          this.students.splice(index, 1);

        }

      }

}

</script>

<template>
    <div id="app">
    <h1>学生列表</h1>
    <input type="text" v-model="searchQuery" placeholder="输入姓名进行查询">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in filteredStudents" :key="index">
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>
            <button @click="editStudent(index)">编辑</button>
            <button @click="deleteStudent(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <h2>添加/编辑学生</h2>
    <form @submit.prevent="saveStudent">
      <label>姓名:</label>
      <input type="text" v-model="newStudent.name" required>
      <label>年龄:</label>
      <input type="number" v-model="newStudent.age" required>
      <button type="submit">{{ editingIndex === null ? '添加' : '保存' }}</button>
    </form>
  </div>

</template>
<script>
export default{
    data() {
      return{
        students: [
          { name: 'ng1', age: 18 },
          { name: 'ng2', age: 20 },
          { name: 'ng3', age: 22 }
        ],
        // 还定义了一个newStudent对象,用于存储正在添加或编辑的学生的临时数据
        // editingIndex变量用于记录正在编辑的学生的索引。
        // searchQuery变量用于存储用户输入的查询关键字。
        newStudent: {
          name: '',
          age: ''
        },
        editingIndex: null,
        searchQuery: ''
        }
        
      },
      // 在computed属性中,定义了一个名为filteredStudents的计算属性,
      // 它根据searchQuery的值对students数组进行过滤,
      // 如果searchQuery为空,则返回所有学生信息;否则,返回包含查询关键字的学生信息。
      computed: {
        filteredStudents() {
          if (this.searchQuery === '') {
            return this.students;
          } else {
            //使用Array的filter方法遍历students数组,并对每个学生对象的姓名进行判断
            //使用了箭头函数语法,表示对每个学生对象进行匿名函数的操作。
            //在函数体内部,使用了String的includes方法,
            //判断学生的姓名中是否包含了searchQuery属性的值(即用户输入的查询关键字)。
            //如果包含了,就将该学生对象保留在过滤后的数组中。
            return this.students.filter(student => {
              return student.name.includes(this.searchQuery);
            });
          }
        }
      },
      methods: {
        //saveStudent方法用于保存或更新学生信息。
        //通过判断editingIndex是否为null来确定当前是添加学生还是编辑学生的操作。
        //如果editingIndex为null,表示当前是添加学生的操作,将newStudent对象添加到students数组中。
        //如果editingIndex不为null,表示当前是编辑学生的操作,
        //将newStudent对象替换students数组中对应索引的学生信息。
        //将editingIndex重置为null,表示编辑操作已完成。
        //将newStudent对象重置为空对象,以清空输入框中的内容。
        saveStudent() {
          if (this.editingIndex === null) {
            // 添加学生
            this.students.push({ ...this.newStudent });
          } else {
            // 编辑学生
            this.students[this.editingIndex] = { ...this.newStudent };
            this.editingIndex = null;
          }
          this.newStudent = { name: '', age: '' };
        },
        //editStudent方法用于编辑学生信息。
        //当点击编辑按钮时,传入对应学生的索引作为参数。
        //在方法内部,将该学生的信息复制到newStudent对象中,以便在表单中显示出来。
        //同时,将editingIndex设置为该学生的索引,以标记当前正在编辑的学生。
        editStudent(index) {
          this.newStudent = { ...this.students[index] };
          this.editingIndex = index;
        },
        //在方法内部,使用splice方法从students数组中删除对应索引的学生信息。
        deleteStudent(index) {
          this.students.splice(index, 1);
        }
      }
}
</script>

执行程序

        注意:以上的代码需要在vue框架中运行,且是vue3的框架 

 展示图

 

后记 

        觉得有用可以点赞或收藏! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1100733.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nodejs原型链污染学习

文章目录 前置知识JavaScript数据类型prototype原型同步和异步child_process模块 原型链污染利用条件 前置知识 JavaScript数据类型 let和var关键字的区别 使用var或let关键字可以定义变量 let和var的区别如下&#xff1a; var是全局作用域&#xff0c;let 只在当前代码块内…

掌握Go编程中的错误处理和日志记录

构建稳健可靠应用的全面指南 错误处理是编写可靠和稳健软件应用的重要方面。在任何编程语言中&#xff0c;错误是不可避免的&#xff0c;如何处理错误会极大地影响代码的质量和稳定性。在本文中&#xff0c;我们将探索Go中的错误处理世界&#xff0c;理解其重要性&#xff0c;…

修炼k8s+flink+hdfs+dlink(五:安装dockers,cri-docker,harbor仓库)

一&#xff1a;安装docker。&#xff08;所有服务器都要安装&#xff09; 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2添加软件源信息 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/cent…

通过商品链接查询淘宝商品详情数据,可以拿到商品标题,商品价格,商品库存,商品销量,商品sku数据等,淘宝API接口

通过商品链接查询淘宝商品详情数据可以参考以下步骤&#xff1a; 打开手机淘宝或者PC端&#xff0c;复制需要查询的商品链接。打开浏览器&#xff0c;输入商品链接&#xff0c;点击搜索。点击搜索结果中的商品链接&#xff0c;进入商品详情页面。点击鼠标右键&#xff0c;选择…

【前段基础入门之】=>CSS3新特性 3D 变换

导语 在上一章节中&#xff0c;我们分享了2D 变换的效果&#xff0c;也分享了一些案例&#xff0c;同时&#xff0c;既然有2D 变换&#xff0c;那么也就肯定有 3D 变换 那么本章节&#xff0c;就为大家带来有关3D 变换的分享. 文章目录 开启3D空间设置景深透视点位置3D 位移3D …

职场中,如何更高效地分析和解决问题(一)

要在职场取得成功&#xff0c;必须掌握多种技能。这些技能大致可分为三类&#xff1a; 一是职能性技能&#xff0c;二是分析和解决问题的技能&#xff0c;三是处理人际关系的技能。 无论在生活中还是工作中&#xff0c;我们都会面临各种问题&#xff0c;有些问题可能简单易处…

Avalonia 实现跨平台的视频聊天、屏幕分享(源码,支持Win、银河麒麟、统信UOS)

现在最火的.NET跨平台UI框架莫过于Avalonia了。Avalonia 基于.NET Core&#xff0c;因此它可以运行在任何支持.NET Core的平台上。之前基于CPF跨平台UI框架写过一个视频聊天的demo&#xff0c;而现在看来Avalonia是大势所趋&#xff0c;于是&#xff0c;我再写一个Avalonia版本…

TP5.1 导出excel文件

在 ThinkPHP 5.1 中引入 PHPExcel&#xff08;现在已被官方弃用&#xff0c;推荐使用 PhpSpreadsheet&#xff09;时&#xff0c;可以按照以下步骤进行操作&#xff1a; 在 composer.json 文件中添加 PHPExcel&#xff08;PhpSpreadsheet&#xff09;的依赖项。找到 require 部…

告别单调的列表页,探索JVS低代码列表页设计的新思路

列表页是什么&#xff1f; 列表页是管理平台中的基础页面&#xff0c;核心的逻辑是实现数据的增删改查&#xff08;CRUD&#xff09;&#xff0c;列表页核心的几个要素&#xff1a;页面内容的数据展示、查询条件、页面按钮及按钮触发的逻辑。 列表页配置 具备应用配置权限的…

利用Python turtle绘制中国结附源码

一、中国结 01 平安喜乐 1&#xff09;效果图 import turtle turtle.screensize(600,800) turtle.pensize(10) turtle.pencolor("red") turtle.seth(-45) turtle.fd(102) turtle.circle(-6,180) turtle.fd(102) turtle.circle(6,180) turtle.fd(102) turtle.circle(…

5、函数式编程--方法引用

目录 6. 方法引用6.1 推荐用法6.2 基本格式6.3 语法详解(了解)6.3.1 引用类的静态方法格式使用前提 6.3.2 引用对象的实例方法格式使用前提 6.3.4 引用类的实例方法格式使用前提 6.3.5 构造器引用格式使用前提 6. 方法引用 ​ 我们在使用lambda时&#xff0c;如果方法体中只有…

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka。 大家对开源项目有兴趣、想成为committer,或者工作需要,会从github上获取最新的开源项目源码。本文做一个示例,怎样搭建本地的源码阅读、开发、构建环境。 首先,在github上找到项目的链接,…

OS 进程的描述与控制

目录 前趋图 程序执行 程序顺序执行 程序并发执行 进程 定义 进程控制块 PCB 进程实体 进程 特征 动态性 并发性 独立性 异步性 状态 3 种基本状态 就绪状态 执行状态 阻塞状态 3 种基本状态间的转换 其他状态 创建状态 终止状态 进程 5 种状态及其转换…

创建JUnit4 的TestBase类

Slf4j RunWith(SpringRunner.class) SpringBootTest(classes {TestApplication.class},webEnvironment SpringBootTest.WebEnvironment.RANDOM_PORT) public class TestBase { } 如图&#xff1a;

基于Bert模型的中文语义相似度匹配算法(离线模式)

1、准备中文离线模型 配置文件夹 文件获取方法&#xff1a; 访问官网&#xff1a;https://huggingface.co/bert-base-chinese/tree/main 下载以下文件 2、测试代码 # -*- coding: utf-8 -*- #pip install transformers -i https://mirrors.aliyun.com/pypi/simple/ #pip …

2023年中国机场建设标准、机场数量及机场系统投资完成情况分析[图]

机场&#xff0c;亦称飞机场、空港&#xff0c;较正式的名称是航空站。机场有不同的大小&#xff0c;除了跑道之外&#xff0c;机场通常还设有塔台、停机坪、航空客运站、维修厂等设施&#xff0c;并提供机场管制服务、空中交通管制等其他服务。 机场建设资质等级标准 资料来源…

当遇到修复错误0xc000000e时,你的电脑需要修复。如何在Windows 11/10上修复此错误

恢复错误代码0xc000000e,你的电脑需要修复,表示硬件故障或驱动器配置不正确,并可能伴随不同的错误消息,如: 所需设备未连接或无法访问 无法加载所选条目 由于应用程序丢失或损坏,无法加载所选条目 启动选择失败,因为无法访问所需的设备。 0xC000000E或STATUS_NO_SUCHDEV…

MBR20100CT-ASEMI肖特基MBR20100CT参数、规格、尺寸

编辑&#xff1a;ll MBR20100CT-ASEMI肖特基MBR20100CT参数、规格、尺寸 型号&#xff1a;MBR20100CT 品牌&#xff1a;ASEMI 芯片个数&#xff1a;2 封装&#xff1a;TO-220 恢复时间&#xff1a;&#xff1e;50ns 工作温度&#xff1a;-65C~175C 浪涌电流&#xff1a…

LeetCode //C++ - 427. Construct Quad Tree

427. Construct Quad Tree Given a n * n matrix grid of 0’s and 1’s only. We want to represent grid with a Quad-Tree. Return the root of the Quad-Tree representing grid. A Quad-Tree is a tree data structure in which each internal node has exactly four c…

2023年中国脱硫石膏产量、均价、综合利用量及市场规模分析[图]

脱硫石膏主要成分和天然石膏一样&#xff0c;为二水硫酸钙CaSO42H2O&#xff0c;含量≥93%。脱硫石膏是FGD过程的副产品&#xff0c;FGD过程是一项采用石灰-石灰石回收燃煤或油的烟气中的二氧化硫的技术&#xff0c;其中2022年中国脱硫石膏产量同比增长2.0%&#xff1b;综合利用…