穷则独善其身,达则兼善天下。你既然认准一条道路,又何必去打听要走多久。
本文实例为大家分享了Vue实现记事本功能的具体代码,供大家参考,具体内容如下
实例功能点不多,主要难点在于笔记文本对象数组的添加,删除,以及对组件的绑定同步事件。
核心代码
<section id="todoapp"> <!-- 输入框 --> <header class="header"> <h1>记事本</h1> <input v-model="note" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" /> <div style="text-align: right;width: 90%;height: 3%;"> <button value="记录" style="text-align: center" @click="addnote">记录</button> </div> </header> <!-- 列表区域 --> <section class="main"> <ul class="todo-list"> <li class="todo" v-for="(n,index) in notes"> <div class="view"> <span class="index">{{index+1}}</span> <label>{{n}}</label> <button class="destroy"></button> </div> </li> </ul> </section> <!-- 统计和清空 --> <footer class="footer"> <span class="todo-count"><strong>{{notes.length}}</strong> items left </span> <button class="clear-completed" @click="delnote"> Clear </button> </footer> </section> <script> let vue = new Vue({ el:"#todoapp", data:{ note:"好好学习,天天向上", index:0, notes:[ "写代码", "吃饭饭", "睡觉觉" ] }, methods:{ addnote:function () { this.notes.push(this.note); }, delnote:function () { this.notes = []; } } }); </script>
关于vue.js组件的好代码教程,请大家点击专题vue.js组件学习好代码教程进行学习。
本文Vue记事本实例详解到此结束。相信自己,我们一定行的,未来的路上有你也有我!小编再次感谢大家对我们的支持!