文章目录

目录

文章目录

前言

一、安装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代码<!--  -->// 初始化vue实例new Vue({el: '#app',data: {keywords:'',isshow: false, //是否显示模态框editIndex: null, //正在编辑的行号newItem: { //新增的对象title: "",author: '',createtime: ''},tempItem: { //正在编辑的对象title: "",author: '',createtime: ''}, //新增的对象list: [{title: "奇酷",author: 'mdy',createtime: '2022-09-30'},{title: "考研",author: 'dyh',createtime: '2022-09-28'}]},methods: {//添加addItem() {// 向list新增itemthis.list.unshift({...this.newItem});//清空数据this.newItem = {title: "",author: '',createtime: ''}},//删除deleteItem(obj) {var index = this.list.indexOf(obj);if (confirm("确认删除吗?")) {this.list.splice(index, 1);}},//编辑渲染editItem(item, index) {// 1、显示模态框this.isshow = true;// 2、渲染数据this.tempItem = {...item};this.editIndex = index; //正在编辑的行},// 确认修改updateItem() {this.list[this.editIndex] = {...this.tempItem};//关闭模态框this.isshow=false;//清空this.tempItem = { //正在编辑的对象title: "",author: '',createtime: ''}}},computed:{//过滤出的listfillist(){if(this.keywords.trim()==""){return this.list;}else{return this.list.filter(item=>{return item.title.includes(this.keywords);})}}}})

四、效果图如下

1.完成的效果图

2.添加的效果图

3.删除的效果图：

点击删除序号1时：

删除成功后：

4.点击修改时：

修改成功：

4. 查询前：

查找标题为奇酷:

总结

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