文章目錄
目錄
文章目錄
前言
一、安裝vue
二、使用vue
三、相關(guān)代碼
四、效果圖如下
前言
隨著人工智能的不斷發(fā)展，機(jī)器學(xué)習(xí)這門技術(shù)也越來越重要，很多人都開啟了學(xué)習(xí)機(jī)器學(xué)習(xí)，本文就介紹了機(jī)器學(xué)習(xí)的基礎(chǔ)內(nèi)容。
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、安裝vue
vue開發(fā)文檔參考這里可以下載 vue.js文
https://cn.vuejs.org/api/
或者引用js連接
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
1.打開命令窗口 輸入：
npm i vue?
二、使用vue
1、創(chuàng)建容器
2、引入
3、new Vue({
el："#app",
data:{},
mthods:{}
})
三、相關(guān)代碼
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代碼
<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="標(biāo)題" v-model='keywords'><br>
<input type="text" placeholder="作者" v-model='tempItem.author'><br>
<input type="date" v-model='tempItem.createtime'><br>
<button @click=updateItem()>確認(rèn)</button>
<button @click='isshow=false'>取消</button>
</div>
</div>
</div>
<input type="text" placeholder="標(biāo)題" v-model='keywords'><br>
<input type="text" placeholder="標(biāo)題" 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>標(biāo)題</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代碼
<script src="./js/vue.js"></script> //js代碼為vue2的js代碼
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script>
// 初始化vue實(shí)例
new Vue({
el: '#app',
data: {
keywords:'',
isshow: false, //是否顯示模態(tài)框
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
});
//清空數(shù)據(jù)
this.newItem = {
title: "",
author: '',
createtime: ''
}
},
//刪除
deleteItem(obj) {
var index = this.list.indexOf(obj);
if (confirm("確認(rèn)刪除嗎?")) {
this.list.splice(index, 1);
}
},
//編輯渲染
editItem(item, index) {
// 1、顯示模態(tài)框
this.isshow = true;
// 2、渲染數(shù)據(jù)
this.tempItem = {
...item
};
this.editIndex = index; //正在編輯的行
},
// 確認(rèn)修改
updateItem() {
this.list[this.editIndex] = {
...this.tempItem
};
//關(guān)閉模態(tài)框
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>四、效果圖如下
1.完成的效果圖
2.添加的效果圖
?
?
3.刪除的效果圖：
點(diǎn)擊刪除序號1時：
?刪除成功后：
?4.點(diǎn)擊修改時：
修改成功：
4. 查詢前：
?文章來源：http://www.zghlxwxcb.cn/news/detail-511958.html
?查找標(biāo)題為奇酷:
?
?
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅簡單介紹了vue的引用以及模態(tài)框的使用，而vue提供了大量能使我們快速便捷地處理數(shù)據(jù)的函數(shù)和方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-511958.html
到了這里，關(guān)于用vue實(shí)現(xiàn)列表的增刪改查基本功能（簡單易懂）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
