vue.js几行实现的简单的todo list
生活随笔
收集整理的這篇文章主要介紹了
vue.js几行实现的简单的todo list
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
序：目前前端框架如：vue、react、angular，構建工具fis3、gulp、webpack等等......
可謂是五花八門，層出不窮，眼花繚亂。。。其實吧只要你想玩還是可以玩玩的..下面是看了2天vuejs的官方文檔實現了一個簡單的todo list.感覺確實方便~！~
預覽戳這里
vuejs官方:http://cn.vuejs.org/
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>todolist-vue</title><script src="src/vue.js"></script><style>*{list-style: none;outline: none;border: none;}#app{font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;}.app{width: 90%;margin: 0 auto;background: #c5c5c5;padding: 5%;border: 1px solid #000;margin-top: 10px;}.app li.finished{text-decoration: line-through;}.typeInput input{width: 70%;font-size: 24px;border: 1px solid #000;padding-left:5px;}</style> </head> <body><div id="app" class="app"><h1 v-text='title'></h1><p class='typeInput'><input type="text" v-model='newText' v-on:keyup.enter='addNewlist'></p><ul><li v-for='item in items' v-bind:class='{finished:item.isFinished}' v-on:click='toggleFinish(item)'>{{item.text}}</li></ul></div><script>var app=new Vue({el:'#app',data:{title:'My todo list',items:[{text:'Learn CSS',isFinished:true},{text:'Learn javascript',isFinished:false}],newText:''},methods:{toggleFinish:function(item){// console.log(item.isFinished);item.isFinished=!item.isFinished;},//3、輸入后按enter鍵盤的事件addNewlist:function(){var _self=this;//3.1 如果不為空就將剛剛輸入的內容以對象的形式，追加到items數組對象內部，//默認新追加的是沒完成的為falseif(_self.newText){_self.items.push({text:_self.newText,isFinished:false});}// console.log(_self.newText);// console.log(this);//3.2 同時清空input輸入框_self.newText='';}}});</script> </body> </html>?目前只能輸入按entry追加一個選項
?
?
?
本文轉載自：http://www.cnblogs.com/-walker/p/6230651.html
轉載于:https://www.cnblogs.com/Eton/p/6231079.html
總結
以上是生活随笔為你收集整理的vue.js几行实现的简单的todo list的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 租房子查询
- 下一篇： 5、继承与派生4-派生类的构造和析构函数