加入购物车-数组框组件封装(v-model父传子,子传父$emit的使用,e.target.value,isNAN方法)

父传子

首先,在父组件中声明变量count(初始值),如何利用v-model传值给子组件

因为v-model由:value和@input组成,使用在子组件下的props中可以用value接收

要注意的是,父组件中的v-model不要写成动态传参了!否则参数传不过来的

子传父

然后就是写步进器的逻辑了

分别问减事件,input框内的change事件,加事件

减和加的点击事件逻辑差不多,需要注意的就是减到1的时候要return无法继续减了

this.$emit()中的'事件'都是input

input框的change事件要考虑两个,一个是非数字,一个是小于1

利用e.target.value获取输入框的值,然后声明一个num,利用+转为number型

然后利用isNaN方法判断num是否为数字,然后再加一个条件就是num是否小于1

如果满足以上任一条件,吧输入框的值恢复到原来的value即可

e.target.value = this.value,要记得return!

否则,也就是通过的话,子传父即可

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值