Vue记事本实例详解
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
