这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

先给大家上个效果图:

 

<div>
  <p>
   请输入支付密码
  </p>
  <p>确认支付 <span>{{password}}</span> </p>
  <div>
   <input type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value">
  </div>
 </div>
 <div>
  <div v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div>
 </div>
</div>

不管逻辑有没有搞懂,先把样式写出来总是没错啦~

思路梳理

1.输入框使用for循环,循环出6个input; 2.下面的按键使用for循环,便于后期存储记录; 3.将所输入的密码放入到pasgroup数组中; 4.定义输入框的下标,将pasgroup数组内容按照下标依次放入input内; 5.开始代码啦~

代码

data () {
  return {
   popupVisible1: true,
   realInput: '',
   password: '111',
   passwordGroup: [],
   number: ['1','2','3','4','5','6','7','8','9','取消','0','删除'],
   pasgroup: [],
   currentInputIndex:-1
  }
 }

在data内定义好我们需要的元素

initPasswordGroup () {
 this.passwordGroup=[];
 for(var i=0;i<6;i++){
  this.passwordGroup.push({
    value:null
  })
 }
}

循环出input,将其内容赋值为value:null,在界面上显示出6个输入框

watch: {
  currentInputIndex (val) {
   if(val == 5){
    console.log(this.pasgroup)
   }else if(val <= -1){
    this.currentInputIndex = -1
   }
  }
 }

监听数组下标的变化,当下标到5的时候打印出该数组

inputPsd (value) {
   switch (value) {
    case '取消':
     this.currentInputIndex = -1
     this.pasgroup = []
     this.initPasswordGroup ()
     break;
    case '删除':
     this.pasgroup.pop()
     console.log(this.pasgroup)
     // this.currentInputIndex 下标值,删除添加时改变
     this.passwordGroup[this.currentInputIndex].value = null
     this.currentInputIndex--
     console.log(this.passwordGroup)
     break;
    default:
     this.pasgroup.push(value)
     this.currentInputIndex++
     this.passwordGroup[this.currentInputIndex].value = value
   }
  },

获取到所点击的元素,当点击‘取消'时清空input 输入框内的内容,清除数组;当点击‘删除'时,下标值依次减减,将value重置为null; 当点击其他数字时,下标值依次增加,将数组pasgroup[]里面的内容写进passwordGroup[]里面,在输入框中展示。

总结

以上所述是小编给大家介绍的Vue仿支付宝支付功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
董明珠:年轻人不能都去搞抖音

董明珠:年轻人不能都去

“年轻人都是搞抖音、搞自媒体就能够发财,但如果没有实
直击|京东数科与西联汇款战略合作 涉足跨境汇款

直击|京东数科与西联

跨境、跨币种汇款企业西联汇款与京东数字科技近日在北
首台量产文字处理器发明人贝瑞森去世:享年93岁

首台量产文字处理器发

按照加州山景城电脑历史博物馆馆长加西亚的话说,这台设
苹果四家供应商律师:高通申请禁售令并未影响生产

苹果四家供应商律师:高

美国芯片巨头高通和苹果之间长达两年的知识产权大战,殃
深度|苹果“美国制造”秘史:加州两家工厂先后失败

深度|苹果“美国制造

事实上,制造业的转移并没有扼杀硅谷;相反,这里成为了全球
车辆减少、押金难退 共享汽车重蹈共享单车覆辙?

车辆减少、押金难退

到了年底,整个共享汽车行业迎来“洗牌期”。高运营成本
最新文章
详解mpvue小程序中怎么引入iconfont字体图标

详解mpvue小程序中怎

这篇文章主要介绍了详解mpvue小程序中怎么引入iconfon
JS如何获取地址栏的参数实例讲解

JS如何获取地址栏的参

本篇文章给大家带来了关于JS如何获取地址栏的参数实例
angularJs利用$scope处理升降序的方法

angularJs利用$scope

今天小编就为大家分享一篇angularJs利用$scope处理升
CKEditor4配置与开发详细中文说明文档

CKEditor4配置与开发

网上分享的CKEditor4中文说明很多都只是的部分使用方
angularjs获取到My97DatePicker选中的值方法

angularjs获取到My97D

今天小编就为大家分享一篇angularjs获取到My97DatePic
vue实现一个炫酷的日历组件

vue实现一个炫酷的日

公司业务新开了一个商家管理微信H5移动端项目,日历控件