循環表單是一種常見的需求，在Vue中可以通過v-for指令來便捷地生成表單。但是在表單提交前需要對輸入的數據進行校驗確保其合法性，Vue提供了一種便捷的方式來實現表單校驗。
首先，在每個表單項中添加一個v-model指令，用來雙向綁定數據。例如：
```html```
上面的代碼中，v-for通過遍歷formItems數組來生成表單。通過v-model將每個表單項的值與formItems數組中對應的對象的value屬性雙向綁定，并且通過:key指定了每個表單項的唯一標識。
接下來，需要定義一個方法來對表單項進行校驗。在Vue中，可以通過computed計算屬性來獲取表單項的校驗結果。例如：
```html
請輸入正確的{{item.label}}
{{isValid}}
```
```js
computed: {
isValid() {
return this.formItems.every(item =>item.validate)
}
}
```
上面的代碼中，在每個表單項的input標簽中通過:class動態綁定error類名來標識校驗失敗的表單項，同時通過v-show指令顯示校驗失敗的提示。在computed屬性中使用了Array的every方法來判斷所有表單項的校驗結果是否都為true，從而得出整個表單的校驗結果。
最后，在提交表單的時候，只需要判斷isValid的值即可確定是否提交表單。如果isValid為false，則提交失敗并提示用戶輸入正確的數據。如果isValid為true，則提交表單。例如：
```html```
```js
methods: {
submit() {
if (this.isValid) {
// 提交表單
} else {
alert('請重新輸入正確的數據')
}
}
}
```
以上就是Vue循環表單校驗的實現方式。通過v-for指令循環生成表單，通過v-model指令雙向綁定表單項的數據，通過computed計算屬性判斷整個表單的校驗結果，最后在提交表單的時候根據isValid的值來確定是否提交表單。這種方式簡單便捷，易于維護，適合大部分的表單校驗需求。上一篇vue登入界面
下一篇css 實現從左到右滑動