基于vue的支付密码输入按键，在网上找了几个感觉都很麻烦，还要安装less，就自己写了一个，跟上篇的计算器方法基本一致，代码如下，样式还请自行设置

<template>
    <div class="pwdpush-box">
        <table border="1" align="center">
            <tr>
                <td @click.stop="onclicknum(1)">
                    1
                </td>

                <td @click.stop="onclicknum(2)">
                    2
                </td>

                <td @click.stop="onclicknum(3)">
                    3
                </td>

            </tr>

            <tr>
                <td @click.stop="onclicknum(4)">
                    4
                </td>

                <td @click.stop="onclicknum(5)">
                    5
                </td>

                <td @click.stop="onclicknum(6)">
                    6
                </td>

            </tr>

            <tr>
                <td @click.stop="onclicknum(7)">
                    7
                </td>

                <td @click.stop="onclicknum(8)">
                    8
                </td>

                <td @click.stop="onclicknum(9)">
                    9
                </td>

            </tr>

            <tr>
                <td @click.stop="false">
                </td>
                <td @click.stop="onclicknum(0)">
                    0
                </td>

                <td @click.stop="onclickclear()">
                    <em class="icon iconfont icon-tuige"></em>
                </td>


            </tr>

        </table>
        <div>
        <div class="pawss">
            <div class="title">
                支付密码
            </div>
            <div style="width: 0;height: 0;overflow: hidden">{{pawssword}}</div>
            
            <div class="pawIput" @click.stop="inputPaw">
                <div><em v-if="pawssword.length>0"></em></div>
                <div><em v-if="pawssword.length>1"></em></div>
                <div><em v-if="pawssword.length>2"></em></div>
                <div><em v-if="pawssword.length>3"></em></div>
                <div><em v-if="pawssword.length>4"></em></div>
                <div><em v-if="pawssword.length>5"></em></div>
            </div>
        </div>
        
    </div>
   
  </div>
</template>

<script>
    
    export default {
        data() {
            return {
                pawssword:'',
            }
        },
        
        methods: {
            onclicknum(nums) {
                if (this.pawssword.length < 6) { this.pawssword = this.pawssword + nums; } }, onclickclear() { this.pawssword = this.pawssword.substring(0,this.pawssword.length-1); }, }, } </script>

 <style scoped>

　　.pawIput{

　　　　display: flex;

　　　　border: 1px solid rgb(239,239,239);

　　　　border-left:0 ;

　　}

　　.pawIput div{

　　　　flex: 1;

　　　　border-left:1px solid rgb(239,239,239);

　　　　height: 45px;

　　　　display: -webkit-flex;

　　　　-ms-flex-align: center;

　　　　align-items: center;

　　}

　　.pawIput em{

　　　　display: inline-block;

　　　　height: 6px;

　　　　width: 6px;

　　　　border-radius:3px ;

　　　　background: rgb(81,81,81);

　　　　margin: auto;

　　}