你觉得你过不去的坎的时候,有一天也会乐观的和别人分享。或许这就是成长。有时候,闭上眼睛,放下骄傲,承认是自己错了,不是认输,而是成长。
本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下
css代码
#todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center; } .content { margin:0px 100px; } .todo { margin: 10px; text-align: left; background-color:green; } .btn { float: right; background-color: lawngreen; } .clear{ background-color: lightseagreen; } .list{ margin-left: 10px; }
html代码加js代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" rel="nofollow noopener noreferrer" href="./css/index.css" > <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="todoapp"> <div class="header"> <h1>小黑记事本</h1> <input type="text" v-model="inputValue" placeholder="请输入任务"> <button @click="add">添加</button> </div> <div class="content"> <ul class="todolist" v-for="(item,index) in list"> <div class="todo"> <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">删除</button> </div> </ul> </div> <div> <button @click="clearBoth" class="clear">全部清除</button> </div> </div> <script> var app = new Vue({ el:"#todoapp", data: { list:["吃饭饭","打游戏","吃西瓜"], inputValue:"" }, methods: { remove:function(index){ this.list.splice(index,1) }, add: function () { this.list.push(this.inputValue) }, clearBoth:function(){ this.list.splice(0,this.list.length) } } }) </script> </body> </html>
运行效果截图
以上就是vue简易记事本开发详解。只有正直、忠诚、宽容和拥有仁爱之心的人才能够达到真正意义上的成功。不具备这些品质的人,就无法体会到成功的滋味,因为成功和幸福一样,不在于外在的富有,而在于内心的感受。更多关于vue简易记事本开发详解请关注haodaima.com其它相关文章!