vue实例方法,vue笔记

　　本文主要详细介绍Vue记事本功能的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了Vue实现记事本功能的具体代码，供大家参考。具体内容如下

　　例子不多，主要难点在于note文本对象数组的添加和删除，以及组件的绑定和同步事件。

　　核心代码

　　区段id=todoapp

　　！-输入框-

　　header class=header

　　H1记事本/h1

　　投入

　　v-model=注意

　　自动对焦=自动对焦

　　autocomplete=off

　　Placeholder=请输入任务

　　class=new-todo

　　/

　　div style= text-align:right；宽度：90%；身高：3%；

　　button value= record style= text-align:center @ click= add note 记录/按钮

　　/div

　　/页眉

　　！-列表区域

　　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 /按钮

　　/div

　　/李

　　/ul

　　/部分

　　！-统计和清空-

　　页脚class=页脚

　　span class= todo-count strong { { notes . length } }/strong剩余项目数/span

　　button class= clear-completed @ click= del note

　　清楚的

　　/按钮

　　/页脚

　　/部分

　　脚本

　　let vue=new Vue({

　　埃尔： #托多阿普，

　　数据：{

　　注意：‘好好学习，天天向上’，

　　指数：0，

　　注释：[

　　编写代码，

　　吃啊吃啊，

　　“睡觉”

　　]

　　},

　　方法：{

　　addnote:function () {

　　this . notes . push(this . note)；

　　},

　　delnote:function () {

　　this . notes=[]；

　　}

　　}

　　});

　　/脚本

　　vue.js组件教程请点击专门的vue.js组件学习教程进行学习。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。