vue實現本地存儲添加刪除修改功能
本文實例為大傢分享瞭vue實現本地存儲添加刪除修改的具體代碼，供大傢參考，具體內容如下
實現功能：
輸入的內容添加到正在進行列表中，
雙擊修改功能，
點擊esc鍵，取消，還是之前的內容，
點擊回車，修改成功，
修改框失焦時修改成功，
選中按鈕時進入已完成列表，未選中時在正在進行中列表，
點擊刪除進行刪除當行，
本地存儲下次打開上次添加的還在
<!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">
<!-- 過濾輸入內容首尾空白符 -->
<!-- 回車事件 -->
<input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
<!-- 獲取正在進行的數量 -->
<h3>正在進行中{{undolist.length}}</h3>
<ul class="list">
<!-- 將正在進行的內容遍歷顯示出來 -->
<li class="item" v-for="item in undolist" :key="item.name">
<div class="">
<!-- 多選框為未選中false狀態 -->
<input type="checkbox" v-model="item.done" />
<!-- 默認為state是0，當雙擊時state為1，內容賦給tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框內容為tempEdit的值，state=1時顯示輸入框，
點擊esc時state為零隱藏，內容還是原來的值，不進行修改，
當回車時state為0就隱藏input框，將修改過得tempEdit，賦給item.name
當失焦時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>
<!-- 點擊刪除時刪除其內容 -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
<!-- 已完成數量 -->
<h3>已經完成{{doneList.length}}</h3>
<ul class="list">
<!-- 將已完成的內容遍歷顯示出來 -->
<li class="item" v-for="item in doneList" :key="item.name">
<div class="">
<!-- 多選框為選中true狀態 -->
<input type="checkbox" v-model="item.done" />
<!-- 默認為state是0，當雙擊時state為1，內容賦給tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框內容為tempEdit的值，state=1時顯示輸入框，
點擊esc時state為零隱藏，內容還是原來的值，不進行修改，
當回車時state為0就隱藏input框，將修改過得tempEdit，賦給item.name
當失焦時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>
<!-- 點擊刪除時刪除其內容 -->
<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是獲取本地存儲數據，
// ||"[]"如果獲取不到轉換為空的數組
list:JSON.parse(localStorage.getItem("list")||"[]"),
// 臨時添加的數據存放處
temp:'',
// 修改框的臨時數據存放處
tempEdit:''
}
},
methods:{
// 添加
additem(){
// 文本框為空時就返回
if(this.temp===""){return;}
// 添加到後面
this.list.push({
name:this.temp,
done:false,
state:0
})
// 清空臨時框
this.temp="";
},
// 刪除
removeitem(item){
// 彈框
var flag=window.confirm("確定要刪除嗎？");
if(flag){
// 查找符合條件元素的索引值
var ind=this.list.findIndex(value=>value.title===item.title);
// splice從第ind刪除一個
this.list.splice(ind,1);
}
}
},
computed:{
// 通過計算把現有的list數據計算出已完成和未完成
// 未完成
undolist(){
// filter數組的過來函數，如果返回結果為真則當前遍歷的數據保留
// 否則就會被過濾掉
return this.list.filter(item=>!item.done);
},
// 已完成
doneList(){
return this.list.filter(item=>item.done);
}
},
watch:{
"list":{
handler(){
// setItem設置本地數據
// JSON.stringify把js對象轉換為json字符串
// JSON.prase把字符串轉換為js對象
localStorage.setItem("list",JSON.stringify(this.list))
},
deep:true,
}
}
})
</script>
</html>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。