vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能
更新時(shí)間：2021年11月25日 11:19:22 作者：溫L
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)本地存儲(chǔ)添加刪除修改的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)功能：
輸入的內(nèi)容添加到正在進(jìn)行列表中，
雙擊修改功能，
點(diǎn)擊esc鍵，取消，還是之前的內(nèi)容，
點(diǎn)擊回車，修改成功，
修改框失焦時(shí)修改成功，
選中按鈕時(shí)進(jìn)入已完成列表，未選中時(shí)在正在進(jìn)行中列表，
點(diǎn)擊刪除進(jìn)行刪除當(dāng)行，
本地存儲(chǔ)下次打開上次添加的還在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
ul{
list-style: none;
}
li{
width: 220px;
height: 40px;
border: 1px solid gainsboro;
margin-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #6CE26C;
}
.del{
margin-right: 5px;
border: none;
width: 20px;
height: 20px;
background-color: #008200;
}
</style>
</head>
<body>
<div id="app">
<!-- 過濾輸入內(nèi)容首尾空白符 -->
<!-- 回車事件 -->
<input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
<!-- 獲取正在進(jìn)行的數(shù)量 -->
<h3>正在進(jìn)行中{{undolist.length}}</h3>
<ul class="list">
<!-- 將正在進(jìn)行的內(nèi)容遍歷顯示出來 -->
<li class="item" v-for="item in undolist" :key="item.name">
<div class="">
<!-- 多選框?yàn)槲催x中false狀態(tài) -->
<input type="checkbox" v-model="item.done" />
<!-- 默認(rèn)為state是0，當(dāng)雙擊時(shí)state為1，內(nèi)容賦給tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框內(nèi)容為tempEdit的值，state=1時(shí)顯示輸入框，
點(diǎn)擊esc時(shí)state為零隱藏，內(nèi)容還是原來的值，不進(jìn)行修改，
當(dāng)回車時(shí)state為0就隱藏input框，將修改過得tempEdit，賦給item.name
當(dāng)失焦時(shí)state為0就隱藏input框，將修改過得tempEdit，賦給item.name
-->
<input type="text" v-model="tempEdit" v-show="item.state==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit"
@blur="item.state=0;item.name=tempEdit"
/>
</div>
<!-- 點(diǎn)擊刪除時(shí)刪除其內(nèi)容 -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
<!-- 已完成數(shù)量 -->
<h3>已經(jīng)完成{{doneList.length}}</h3>
<ul class="list">
<!-- 將已完成的內(nèi)容遍歷顯示出來 -->
<li class="item" v-for="item in doneList" :key="item.name">
<div class="">
<!-- 多選框?yàn)檫x中true狀態(tài) -->
<input type="checkbox" v-model="item.done" />
<!-- 默認(rèn)為state是0，當(dāng)雙擊時(shí)state為1，內(nèi)容賦給tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框內(nèi)容為tempEdit的值，state=1時(shí)顯示輸入框，
點(diǎn)擊esc時(shí)state為零隱藏，內(nèi)容還是原來的值，不進(jìn)行修改，
當(dāng)回車時(shí)state為0就隱藏input框，將修改過得tempEdit，賦給item.name
當(dāng)失焦時(shí)state為0就隱藏input框，將修改過得tempEdit，賦給item.name
-->
<input type="text" v-model="tempEdit" v-show="item.state==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit;"
@blur="item.state=0;item.name=tempEdit;"
/>
</div>
<!-- 點(diǎn)擊刪除時(shí)刪除其內(nèi)容 -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data(){
return{
// 清單列表
// getItem是獲取本地存儲(chǔ)數(shù)據(jù)，
// ||"[]"如果獲取不到轉(zhuǎn)換為空的數(shù)組
list:JSON.parse(localStorage.getItem("list")||"[]"),
// 臨時(shí)添加的數(shù)據(jù)存放處
temp:'',
// 修改框的臨時(shí)數(shù)據(jù)存放處
tempEdit:''
}
},
methods:{
// 添加
additem(){
// 文本框?yàn)榭諘r(shí)就返回
if(this.temp===""){return;}
// 添加到后面
this.list.push({
name:this.temp,
done:false,
state:0
})
// 清空臨時(shí)框
this.temp="";
},
// 刪除
removeitem(item){
// 彈框
var flag=window.confirm("確定要?jiǎng)h除嗎？");
if(flag){
// 查找符合條件元素的索引值
var ind=this.list.findIndex(value=>value.title===item.title);
// splice從第ind刪除一個(gè)
this.list.splice(ind,1);
}
}
},
computed:{
// 通過計(jì)算把現(xiàn)有的list數(shù)據(jù)計(jì)算出已完成和未完成
// 未完成
undolist(){
// filter數(shù)組的過來函數(shù)，如果返回結(jié)果為真則當(dāng)前遍歷的數(shù)據(jù)保留
// 否則就會(huì)被過濾掉
return this.list.filter(item=>!item.done);
},
// 已完成
doneList(){
return this.list.filter(item=>item.done);
}
},
watch:{
"list":{
handler(){
// setItem設(shè)置本地?cái)?shù)據(jù)
// JSON.stringify把js對(duì)象轉(zhuǎn)換為json字符串
// JSON.prase把字符串轉(zhuǎn)換為js對(duì)象
localStorage.setItem("list",JSON.stringify(this.list))
},
deep:true,
}
}
})
</script>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn)
本文主要介紹了如何在vuejs項(xiàng)目中使用md5加密密碼的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08 
v-bind和v-model是Vue.js中的兩個(gè)常用指令,它們?cè)诠δ芎陀猛旧嫌幸恍﹨^(qū)別,接下來小編就給大家具有講講vue中v-bind和v-model區(qū)別,感興趣的同學(xué)跟著小編一起來看看吧
2023-08-08 
這篇文章主要介紹了vue 解除鼠標(biāo)的監(jiān)聽事件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11 
詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)）
本篇文章主要介紹了詳解Vue路由鉤子及應(yīng)用場(chǎng)景（小結(jié)），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11 
這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09 
這篇文章主要介紹了詳解Vue.js v-for不支持IE9的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12 
vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決
這篇文章主要介紹了vue 微信分享回調(diào)iOS和安卓回調(diào)出現(xiàn)錯(cuò)誤的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09 
基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法
這篇文章主要介紹了基于vue框架手寫一個(gè)notify插件實(shí)現(xiàn)通知功能的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03 
這篇文章主要介紹了vue 實(shí)現(xiàn)用戶登錄方式的切換功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04