Article Directory
Table of contents
Fourth, the effect diagram is as follows
foreword
With the continuous development of artificial intelligence, the technology of machine learning is becoming more and more important. Many people have started to learn machine learning. This article introduces the basic content of machine learning.
提示：以下是本篇文章正文内容，下面案例可供参考
1. Install vue
Vue development documentation can be downloaded here for vue.js
Or refer to the js connection
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1. Open the command window and enter:
npm to vue
Two, use vue
1. Create a container
2. Introduction
3、new View({
el："#app",
data:{},
mthods:{}
})
3. Related codes
1. css code
.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 code
<div id="app">
<div class="modal" v-show='isshow'>
<div class="cotain">
<div class="title"><span>编辑</span><span @click='isshow=false'>x</span></div>
<div class="content">
<input type="text" placeholder="标题" v-model='keywords'><br>
<input type="text" placeholder="作者" v-model='tempItem.author'><br>
<input type="date" v-model='tempItem.createtime'><br>
<button @click=updateItem()>确认</button>
<button @click='isshow=false'>取消</button>
</div>
</div>
</div>
<input type="text" placeholder="标题" v-model='keywords'><br>
<input type="text" placeholder="标题" v-model='newItem.title'>
<input type="text" placeholder="作者" v-model='newItem.author'>
<input type="date" v-model='newItem.createtime'>
<button @click='addItem'>确定</button>
<table border="1" width='600'>
<tr bgcolor='lightblue'>
<th>序号</th>
<th>标题</th>
<th>作者</th>
<th>日期</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in fillist">
<td>{
{index+1}}</td>
<td>{
{item.title}}</td>
<td>{
{item.author}}</td>
<td>{
{item.createtime}}</td>
<td>
<a href="javascript:void(0);" @click=deleteItem(item)>删除</a>|
<a href="javascript:void(0);" @click=editItem(item,index)>编辑</a>
</td>
</tr>
</table>
</div>3. Vue code
<script src="./js/vue.js"></script> //js代码为vue2的js代码
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script>
// 初始化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新增item
this.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:{
//过滤出的list
fillist(){
if(this.keywords.trim()==""){
return this.list;
}else{
return this.list.filter(item=>{
return item.title.includes(this.keywords);
})
}
}
}
})
</script>Fourth, the effect diagram is as follows
1. The finished rendering
2. Added renderings
3. Deleted renderings:
When clicking to delete serial number 1:
After successful deletion:
4. When you click Modify:
Successfully modified:
4. Before query:
Find a title titled Qiku:
Summarize
The above is what I want to talk about today. This article only briefly introduces the reference of vue and the use of modal boxes, and vue provides a large number of functions and methods that allow us to process data quickly and conveniently.