【Vue】记事本

上一篇：Vue的指令

https://blog.csdn.net/m0_67930426/article/details/134599378?spm=1001.2014.3001.5501

本篇所需指令：   v- for  v-model  v-on  v-show

目录

删除功能

添加功能

 统计功能

清空功能

v-show

---

  

删除功能

    
    




  
记事本
  
  添加任务


  

    


      

      

        {{index+1}}.{{item.text}}
        x
      
      
    
  


  合计:2
  清空任务

 

添加功能

add(){
        if(this.thing.trim()===''){
          alert('请输入任务名称')
          return
        }
        this.list.unshift({
          id:"",
          text: this.thing,
        })
      }

 

这里主要使用了v-model指令，通过v-model指令绑定输入框，获取表单元素的内容

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

 

统计功能

核心是计算数组的长度

清空功能

原理：  点击清空按钮，将原数组变为空数组

v-show

当点击清空按钮的时候，将底部隐藏

 

all-functions

    
    




  
记事本
  
  添加任务


  

    


      

      

        {{index+1}}.{{item.text}}
        x
      
      
    
  


  合计:{{list.length}}
  清空任务