用v-for实现html结构和数据及样式的分离

一，原型展示

新增：

编辑：

详情展示：

二，实现思路

对于表单项较多，新增、编辑和详情展示表单展示内容基本一致，只是展示形式有所不同，考虑可以共用一个组件，加一个pageType字段区分是新增、编辑还是详情展示；利用数据驱动视图的思想，我们可以把页面内容抽象成数据（例如，每一个输入框可能的所有属性可以定义到一个对象中 { id: 'metricsName', name: '中文名称', type: 'text', required: true, group: 'base', value: '', valueshow: '', editDisabled: true, isValidate: true, isLength: 32, tip: '' },）id作为后端接口的返回字段，name是表单项的显示名称，type,required,value,valueshow,editDisabled,isValidate,isLength,tip都是控制input框需要的元素（抽象成可控的属性）,还有一个group，这个字段是用来给输入框分类的，group的值相同的说明是在同一组，显示在同一组下。

三，代码实现

四，实现意义

将数据和页面结构及样式分离，可剥离成组件，代码简洁，易于阅读，容易维护，有较强的可扩展性。