用vue实现列表的增删改查基本功能（简单易懂）

文章目录

目录

文章目录

前言

一、安装vue

二、使用vue

三、相关代码

四、效果图如下

---

前言

随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装vue

vue开发文档参考这里可以下载 vue.js文

https://cn.vuejs.org/api/

或者引用js连接

1.打开命令窗口 输入：

npm i vue 

二、使用vue

1、创建容器

2、引入

3、new Vue({

el："#app",

data:{},

mthods:{}

})

三、相关代码

1.css代码

.modal {
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, .6);
				position: absolute;
				left: 0;
				top: 0;
			}

			.modal .cotain {
				width: 400px;
				height: 300px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: #fff;
			}

			.modal .title {
				width: 100%;
				height: 38px;
				background-color: #00aaff;
				line-height: 38px;
				text-align: center;
			}

			.modal .title span:nth-of-type(2) {
				float: right;
			}

---

2.html代码

			

				

					
编辑x
					

						

						

						

						确认
						取消
					
				
			
			

			
			
			
			
			确定
			

				

					
序号
					
标题
					
作者
					
日期
					
操作
				
				

					
{{index+1}}
					
{{item.title}}
					
{{item.author}}
					
{{item.createtime}}
					

						删除|
						编辑

					
				
			
		

3.Vue代码

  //js代码为vue2的js代码

		

四、效果图如下

1.完成的效果图

2.添加的效果图

 

 

3.删除的效果图：

点击删除序号1时：

 删除成功后：

 4.点击修改时：

修改成功：

4. 查询前：

 

 查找标题为奇酷:

 

 

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue的引用以及模态框的使用，而vue提供了大量能使我们快速便捷地处理数据的函数和方法。