vue动态生成新表单并且添加验证校验规则方式

如果要在Vue中动态生成新表单并且添加验证校验规则，可以通过以下步骤完成：

1. 安装Vue的表单验证插件Vuelidate。在项目根目录下执行以下命令：

npm install vuelidate

1. 在Vue文件中引入Vuelidate

import { required } from 'vuelidate/lib/validators';
export default {
  validators: {
    required
  }
}

1. 在data中设置表单数据

data() {
  return {
    formData: {
      name: '',
      age: ''
    }
  }
}

1. 在表单元素中绑定v-model双向数据绑定

<input type="text" v-model="formData.name">

1. 使用$validator进行表单验证

<div v-if="$v.formData.name.$error">
  姓名必填
</div>

1. 在某些情况下，需要生成新的表单，可以通过Vue中的v-for指令实现

<div v-for="(item, index) in list">
  <input type="text" v-model="item.name" :name="'name'+index" v-validate="'required|email'">
  <input type="text" v-model="item.age" :name="'age'+index" v-validate="'required|numeric'">

  <div v-if="errors.has('name'+index)">
    <span v-for="(errorMsg, errorIndex) in errors.get('name'+index)" :key="errorIndex">{{errorMsg}}</span>
  </div>
  <div v-if="errors.has('age'+index)">
    <span v-for="(errorMsg, errorIndex) in errors.get('age'+index)" :key="errorIndex">{{errorMsg}}</span>
  </div>
</div>

在以上代码中，我们使用v-for指令循环生成多个表单，同时为每个表单元素绑定v-model和v-validate指令进行数据绑定和校验规则设置。并且使用errors.has和errors.get方法显示错误信息。

综上所述，通过以上步骤完成Vue中动态生成新表单并且添加验证校验规则的功能。