当摸鱼被产品经理发现后....

当我在办公室摸鱼的时候,产品经理来到我后面看着我；

深情的说:"工作饱和吗？饿了吧？来！把这个需求写了"

写一个form收集用户资料吧,小伙子!

开始

没图,全靠想象力,请叫我UI前端

我二话不说直接使用elementUI,写了一大堆el-form-item和el-input

<script setup> 
import {reactive} from 'vue'

const state = reactive({
    AA:'',
    BB:''.
    CC:'',
    ...
})

</script>

<template>
<el-form :model='state'>
    <el-form-item label='AA'>
        <el-input v-model='state.AA'></el-input>
    </el-form-item>
        <el-form-item label='AA'>
        <el-input v-model='state.AA'></el-input>
    </el-form-item>
    </el-form-item>
        <el-form-item label='BB'>
        <el-input v-model='state.BB'></el-input>
    </el-form-item>
    </el-form-item>
        <el-form-item label='CC'>
        <el-input v-model='state.AA'></el-input>
    </el-form-item>    
    ....
</el-form>
</template>

PS:老板看见我一下子输出这么多代码，肯定会认为我产出超厉害的

优化

作为一个新人程序员,肯定不允许养成这样的习惯！

思路: 把重复的label和model封装成一个数组,使用v-for进行遍历

<script setup> 
import {reactive} from 'vue'

const state = reactive({
    data:[
    {name: 'AA', value: '', key: 'AA'},
    {name: 'BB', value: '', key: 'BB'},
    {name: 'CC', value: '', key: 'CC'},
    {name: 'DD', value: '', key: 'DD'}
    ]
})

</script>

<template>
<el-form :model='state'>
  <el-form-item v-for="item in state.value" :label="item.name">
     <el-input type="text" v-model="item.value"></el-input>
  </el-form-item>
</el-form>
</template>

key属性作为提交后返回给后端的参数;

当然最后,别骂我,我只是想分享下我的想法;