溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
實現todolist功能，具體實現如下：
可以實現對list添加、移除以及狀態轉變，其中添加功能既可以通過鼠標點擊按鈕實現，也可以通過回車鍵按下實現，通過使用v-model對checked的值進行雙向綁定來完成狀態的改變。在本次實際操作中仍存在一個小問題就是methods中函數調用，在完成數據存儲前可以通過this.$options.methods.addFun();進行調用。
<div id="app">
<input type="text" v-model="msg" @keydown="kaddFun($event)"/>
<button @click="addFun()">添加</button>
<br /><br />
<h4>進行中</h4>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>
</ul>
<h4>已完成</h4>
<ul>
<li v-for="(item,key) in list" v-if="item.checked" ><input type="checkbox" v-model="item.checked"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
msg:'',
list:[]
},
methods:{
addFun(){
this.list.push({
title:this.msg,
checked:false
}),
this.msg = '';
//存儲數據
localStorage.setItem('list',JSON.stringify(this.list))
},
kaddFun(e){
if(e.keyCode==13){
this.addFun();
}
},
moveFun(key){
confirm("是否移除"+this.list[key].title+"?");
this.list.splice(key,1);
localStorage.setItem('list',JSON.stringify(this.list))
},
saveList(){
localStorage.setItem('list',JSON.stringify(this.list))
}
},
//生命周期函數 vue頁面刷新就會觸發的方法
mounted(){
//json字符串轉成json對象
var list = JSON.parse(localStorage.getItem('list'))
//判斷list是否存在
if(list){
//存在則將獲取到的list保存刷新后的list中
this.list = list;
}
}
})
</script>
封裝操作localstorage本地存儲方法
總結
以上所述是小編給大家介紹的vue實現todolist基本功能以及數據存儲功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
