How to control the hiding and display of the input box through the button in ElementUI

Click this button and two input boxes will appear

 After clicking Add, two input boxes and a button will appear. The solution to this solution is relatively simple: just set an attribute value and bind it with v-if. Under what circumstances need to display it, you need to set v-if binding The specified value is equal to the value to be displayed

<div style="height:7vh;font-size: 13px">
        <el-row>
          <el-col :span="2">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewRefund">新增</el-button>
          </el-col>
          <el-col :span="10">
            <span v-if="showCreate === 1">日期</span>
            <el-date-picker v-if="showCreate === 1" v-model="refundDate" type="date" size="small" placeholder="请选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="margin-left: 10px;width: 150px"></el-date-picker>
          </el-col>
          <el-col :span="8">
            <span v-if="showCreate === 1">金额</span>
            <el-input v-if="showCreate === 1" v-model="refundMoney" placeholder="请输入金额" size="small" style="width: 150px;margin-left: 10px" />
          </el-col>
          <el-col :span="2">
            <el-button v-if="showCreate === 1" type="primary" size="small" @click="addSaveNewRefund">保存</el-button>
          </el-col>
        </el-row>
      </div>

The default value of showCreate above can be set arbitrarily, when you click Add

 this.showCreate = 1

This requirement can be fulfilled through the above solution