记点击按钮删除input输入的内容

<template>
  <div class="usde-financial-notfound">
    <div class="middle">
      <p>USDE</p>
      <input
        v-model="data"
        type="text"
        placeholder="限购1-10000，当前产品总余量 36992.1214"
        @input="showDel()"
      />
      <img @click="deleContent()" v-show="isshow" src="../assets/imgs/pastrecord/quxiao@2x.png" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      isshow: false,
      data: ''
    }
  },
  methods: {
    showDel() {
      this.isshow = true
    },
    deleContent() {
      this.data = ''
      this.isshow = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import '@/assets/styles/scss/output.scss';

@include b(notfound) {
  width: 100%;
  height: 100vh;
  background-color: #08103f;
  .middle {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    background-color: #08103f;
    padding: 0 15px;
    p {
      color: #fff;
      font-size: 16px;
    }
    input {
      width: 240px;
      border: none;
      // height: 72px;
      background-color: #08103f;
      margin-left: 10px;
      color: #afcbff;
      font-size: 16px;
      user-select: text;
    }
    input::-webkit-input-placeholder {
      color: #3e4dab;
      font-size: 12px;
    }
    img {
      width: 8px;
      height: 8px;
      margin-left: 15px;
    }
  }
}
</style>