VUE-记事本----熟悉vue指令

使用v-for渲染页面中的列表,使用v-model绑定 input中的数据,同时使用v-on:"keyup.enter"将输入框中的数据传给vue实例的数组中,渲染新的列表。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

记事本删除功能
使用v-for中的index项,使用v-on指令绑定click添加remove函数,传入index的参数,使用splice去除当前下标的元素,页面会及时将当前数组渲染。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

记事本的统计
使用插值表达式{{ list.length }}获取数组长度
在这里插入图片描述
在这里插入图片描述

记事本清空
使用v-on绑定函数在按钮上,函数使用list.splice(0, list.length),实现数组的清空,同时响应式的渲染。
在这里插入图片描述
在这里插入图片描述

记事本的下部隐藏
使用v-if或v-show进行隐藏,因为记事本不需要频繁的清空,判断条件为列表的长度是否为空即可。
在这里插入图片描述

记事本总结
在这里插入图片描述
摘自黑马vue教程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值