基于vue的支付密码输入按键

<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>

　　.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; 　　}