vue2 - 动态表单动态渲染问题？

Question

在Vue2环境中，有一个动态表单，数据源如下：

list: [  { name: '姓名', props: 'name', show: [] },  { name: '年龄', props: 'age', show: [] },  { name: '身高', props: 'height', show: [] },  {    name: '是否合格',    props: 'isPass',    show: [      { key: 'age', symbol: '<=', value: 28 },      { key: 'height', symbol: '>=', value: 180 },    ],    value: ''  }],formData: { name: '', age: '', height: '', isPass: '' },

要实现的功能是：每个表单项根据其对象里的show来判断是否显示，如果show为空数组，代表无条件限制。
比如是否合格这一项，只有在 年龄<=28&&身高>=180 时才显示。

测试渲染代码如下：

<div class="list">  <template v-for="item in list">    <div class="item" :key="item.name">      <span>{{ item.name }}</span>      <input type="text" v-model="formData[item.props]" :placeholder="'请输入' + item.name" />    </div>  </template></div>

请问下一步该如何进行？

Answer 1

<template>  <div class="list">    <template v-for="item in list">      <div class="item" v-if="shouldShow(item)" :key="item.name">        <span>{{ item.name }}</span>        <input type="text" v-model="formData[item.props]" :placeholder="'请输入' + item.name" />      </div>    </template>  </div></template><script>export default {  data() {    return {      list: [        { name: '姓名', props: 'name', show: [] },        { name: '年龄', props: 'age', show: [] },        { name: '身高', props: 'height', show: [] },        {          name: '是否合格',          props: 'isPass',          show: [            { key: 'age', symbol: '<=', value: 28 },            { key: 'height', symbol: '>=', value: 180 },          ],          value: ''        }      ],      formData: { name: '', age: '', height: '', isPass: '' },    };  },  methods: {    shouldShow(item) {      if (item.show.length === 0) {        return true;      }      return item.show.every(condition => {        const formValue = this.formData[condition.key];        switch (condition.symbol) {          case '<=':            return formValue <= condition.value;          case '>=':            return formValue >= condition.value;          default:            return false;        }      });    }  }};</script><style scoped></style>