vue中 input框 清除按钮的显示与隐藏

<input v-model="name" class="input step2-cont-ipt" required placeholder="请输入姓名" >
<a class="clear" @click="clear1();return false;"></a>

methods: {
        clear1(){
            if(this.name){
                this.name = '';
            }
        }
    }

.clear { 
                    display: none; 
                    position: absolute; 
                    width: 30px; 
                    height: 30px;
                    right: 2%;
                    top: 50%;
                    transform: translate(-2%,-50%);
                    background: url('../../assets/images/clear.png');
                    background-size:100% 100%;
                }
                .input::-ms-clear { display: none; }
                .input:valid + .clear { display: inline; }