动态控制输入框

在开发中经常会遇到根据情况动态控制输入框的情况，以前都是使用UI框架提供的组件，这次自己动手完成了一个简易的动态输入框

先来上效果


正片开始

加减号使用fontawesome的图标不多做赘述

先来看一下标签

<div id="upload-problem-outin" v-for="(item, index) in problem.sample" :key="index">
    <div class="outin-style">
        <v-textarea
                v-model="item.inputSample"
                :rules="rule.sampleRule"
                dense
                outlined
                clearable
                :label="'输入样例'+(index+1)"
        />
    </div>
    <div class="outin-style">
        <v-textarea
                v-model="item.outputSample"
                :rules="rule.sampleRule"
                dense
                outlined
                clearable
                :label="'输出样例'+(index+1)"
        />
    </div>
</div>

problem.sample是problem对象中的样例相关部分，格式如下

sample: [{
    inputSample: '',
    outputSample: ''
}],

通过v-for遍历sample数组来渲染样例组数，通过数据绑定，控制sample数组的内容来实现样例组数的渲染

再来看一下控制的方法

addSample() {
    this.problem.sample.push({
        inputSample: '',
        outputSample: ''
    })
},
subSample() {
    if(this.problem.sample.length < 2) {
        alert('至少保留一组')
        return
    }
    this.problem.sample.pop()
}

触发增加事件时向原数组追加一个sample对象，触发减少事件时丢掉最后一项，智力有一个判断，即样例数不能少于1

大功告成