vue todolist
生活随笔
收集整理的這篇文章主要介紹了
vue todolist
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近初學vue，做最簡單的todolist
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>todolist</title><style type="text/css">#container{width: 700px;height: 100px;padding: 40px;margin: 0 auto;}li{list-style: none;}.close-btn{display: inline-block;width: 20px;height: 20px;background: url('close.png') no-repeat;cursor: pointer;}.finished{text-decoration: line-through;}</style></head><body><div id="container"><input type="text" v-model="newitem" @keyup.enter="addlistitem"/><div class="todo-list"><ul><li v-for="(listitem,index) in list"><input type="checkbox" v-model="listitem.isFinished" /><span v-bind:class="{ finished: listitem.isFinished }" >{{ listitem.text }}</span><span class="close-btn" @click="deleteitem(index)"></span></li></ul></div></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>var app = new Vue({el: '#container',data: {newitem:'',list:[]},watch: {// 如果 `list`數據 發生改變，這個函數就會運行list: {handler:function () {this.saveTolocal(this.list)},// 深度觀察，當對象里的屬性發生改變時，也會觸發watch。點擊checkbox需要deep: true，否則watch不會起作用。deep: true }},methods:{// 添加項目addlistitem:function(){if(this.newitem != ''){this.list.push({'text':this.newitem,'isFinished':false})this.newitem = ''}},// 刪除項目deleteitem:function(curIndex){this.list.splice(curIndex,1)},// 存入localStoragesaveTolocal:function(data){localStorage.setItem('tododata',JSON.stringify(data))}}});// 讀取localStorageif(!!localStorage.getItem('tododata')){app.list = JSON.parse(localStorage.getItem('tododata'))}</script></body> </html>
總結
以上是生活随笔為你收集整理的vue todolist的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue css动画
- 下一篇： 百度联盟广告如何理解按父容器宽度