手把手教你做一个VUE纯单页面的,静态的增删改查,非常详细

本文主要是介绍手把手教你做一个VUE纯单页面的,静态的增删改查,非常详细,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

手把手教你做一个VUE纯单页面的,静态的增删改查

1.工具

idea
vue需要的三个js文件

vue.js vue最基础的js文件
qs.js后台传参时需要进行转换(此处单页面,不进行后台传参,所以不需要)
axios.js 发送路径
在这里插入图片描述
步骤1:
首先建一个vuetest.html文件,导入需要的js文件
如图:我的项目结构:
在这里插入图片描述
导入需要的js文件

 <script src="../vueJs/vue.js"></script>

查询

body中

<div  id="app"><table border="1"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>操作</td></tr><!--遍历: list为在data中定义的数组名字  item为字段名,index为下标--><tr  v-for="(item,index) in list" ><td>{{index}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><input type="button" v-on:click="update(index,item)" value="修改"><input type="button" v-on:click="del(index)" value="删除"></td></tr></table></div>

script中

 new Vue({//所有的vue的操作,都必须放到这个id="app" 的div中,否则,vue用不了el:"#app",data:{//存放要查询的数据集合(动态的这里直接写一个空集合,就可以使用了)list:[{name:"张三",age:22},{name:"李四",age:11},{name:"王五",age:26},{name:"aaa",age:33}],},})

查询完成了

在这里插入图片描述

新增

姓名: <input type="text" v-model="name" id="name"/>年龄: <input type="text"  v-model="age" id="age"/><input type="button" v-on:click="add()" value="增加">
 new Vue({el:"#app",data:{//与v-model中的必须保持一致name:"",age:"",list:[{name:"张三",age:22},{name:"李四",age:11},{name:"王五",age:26},{name:"aaa",age:33}],},methods:{add:function(){//直接通过this.name就可以获取到文本框中name的值//  alert(this.name);//  alert(this.age);//定义一个键值对的json,通过list的push方法增加到list中数据var user = {name:this.name,age:this.age}this.list.push(user);},}})

增加结束
在这里插入图片描述

修改

姓名: <input type="text" v-model="name" id="name"/>
年龄: <input type="text"  v-model="age" id="age"/><input type="button" v-on:click="updateUser()" value="修改"><table border="1"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>操作</td></tr><!--遍历: list为数组名字  item为字段名,index为下标--><tr  v-for="(item,index) in list" ><td>{{index}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><input type="button" v-on:click="update(index,item)" value="修改"><input type="button" v-on:click="del(index)" value="删除"></td></tr></table>
new Vue({el:"#app",data:{nameJiLian:"",name:"",age:"",//存放当前行的唯一标识indexVal:"",list:[{name:"张三",age:22},{name:"李四",age:11},{name:"王五",age:26},{name:"aaa",age:33}],},methods:{//回显toUpdate:function(index){//  alert(index);//   alert(item.name);//通过this可直接获取到文本框中name个age值,并进行回显,index是当前行的唯一标识this.name = this.list[index].name;this.age =  this.list[index].age;this.indexVal = index;//alert( this.indexVal);},//修改updateUser:function(index) {//获取到所有对象,以键值进行存储var user = {name:this.name,age:this.age};//获取当前唯一标识var indexVal = this.indexVal;//   alert(indexVal);//给list集合下标为indexVal的所对应的赋值this.list[this.indexVal].name = this.name;this.list[this.indexVal].age = this.age;//修改结束,将所有文本框置空this.name="";this.age="";this.indexVal="";}}})

回显
在这里插入图片描述
修改后
在这里插入图片描述

删除

div中

    <tr><td>编号</td><td>姓名</td><td>年龄</td><td>操作</td></tr><!--遍历: list为数组名字  item为字段名,index为下标--><tr  v-for="(item,index) in list" ><td>{{index}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><input type="button" v-on:click="update(index,item)" value="修改"><input type="button" v-on:click="del(index)" value="删除"></td></tr>
</table>

script

 methods:{//需要传一个参数过来。也就是当前数据的唯一标识del:function(index){// alert("删除");//用list的splice方法,第一个参数:从那个开始删除,第二个参数:删除几条数据this.list.splice(index,1);},}

删除结束
在这里插入图片描述
在这里插入图片描述

这篇关于手把手教你做一个VUE纯单页面的,静态的增删改查,非常详细的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/726413

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入

IDEA连接达梦数据库的详细配置指南

《IDEA连接达梦数据库的详细配置指南》达梦数据库(DMDatabase)作为国产关系型数据库的代表,广泛应用于企业级系统开发,本文将详细介绍如何在IntelliJIDEA中配置并连接达梦数据库,助力... 目录准备工作1. 下载达梦JDBC驱动配置步骤1. 将驱动添加到IDEA2. 创建数据库连接连接参数

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

2025最新版Python3.13.1安装使用指南(超详细)

《2025最新版Python3.13.1安装使用指南(超详细)》Python编程语言自诞生以来,已经成为全球最受欢迎的编程语言之一,它简单易学易用,以标准库和功能强大且广泛外挂的扩展库,为用户提供包罗... 目录2025最新版python 3.13.1安装使用指南1. 2025年Python语言最新排名2.

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》:本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2

Java中使用注解校验手机号格式的详细指南

《Java中使用注解校验手机号格式的详细指南》在现代的Web应用开发中,数据校验是一个非常重要的环节,本文将详细介绍如何在Java中使用注解对手机号格式进行校验,感兴趣的小伙伴可以了解下... 目录1. 引言2. 数据校验的重要性3. Java中的数据校验框架4. 使用注解校验手机号格式4.1 @NotBl

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...