【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


  

删除功能




    
    Title


记事本

  • {{index+1}}.
合计:2

【Vue】记事本_第1张图片 

【Vue】记事本_第2张图片

添加功能

【Vue】记事本_第3张图片

【Vue】记事本_第4张图片

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

 

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

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

【Vue】记事本_第5张图片

【Vue】记事本_第6张图片

 

统计功能

【Vue】记事本_第7张图片

【Vue】记事本_第8张图片

【Vue】记事本_第9张图片

核心是计算数组的长度

清空功能

【Vue】记事本_第10张图片

【Vue】记事本_第11张图片

原理:  点击清空按钮,将原数组变为空数组

v-show

【Vue】记事本_第12张图片

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

【Vue】记事本_第13张图片 

【Vue】记事本_第14张图片

all-functions




    
    Title


记事本

  • {{index+1}}.
合计:{{list.length}}

你可能感兴趣的:(Vue,vue.js,前端,javascript)