Vue实现简易记事本

本文实例为大家分享了Vue实现简易记事本的具体代码，供大家参考，具体内容如下

预览图：

功能如下：

（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）

（2）点击删除，可删除对应任务

（3）点击清空，所有任务都会被删除

（4）左下角同步显示任务总数

完整代码如下：

 

    
    
    
    
    

 

    

        

            
记事本
            
        
        

            

                

                    

                        {{ index + 1 }}
                        {{ item }}
                        删除
                    
                
            
        
        

            

                items: {{ list.length }}
            
            清空
        
    
    
    

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。