現(xiàn)在的網(wǎng)站越來(lái)越復(fù)雜，需要處理各種數(shù)據(jù)。為此，用復(fù)雜動(dòng)態(tài)表單來(lái)幫助我們改善這一問(wèn)題。

// 定義表單
data () {
return {
form: {
name: '',
age: 0,
address: '',
hobbies: []
},
hobbyOptions: [
{ label: '籃球', value: 'basketball' },
{ label: '足球', value: 'football' },
{ label: '游泳', value: 'swimming' }
]
}
}

以上是一個(gè)Vue的表單定義。其中表單有name、age、address和hobbies四個(gè)屬性，hobbies是一個(gè)數(shù)組。此外，hobbyOptions是用于選擇愛(ài)好的一個(gè)選項(xiàng)數(shù)組。我們可以在表單中選擇愛(ài)好。

// 愛(ài)好的checkbox列表
{{ option.label }}

下面是一個(gè)使用Element UI的Checkbox組件的列表。Vue綁定這個(gè)列表的選擇模型實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。我們可以通過(guò)選擇實(shí)時(shí)更改表單數(shù)據(jù)。

// 自定義驗(yàn)證規(guī)則
rules: {
name: [
{ required: true, message: '請(qǐng)輸入姓名', trigger: 'blur' }
],
age: [
{ required: true, message: '請(qǐng)輸入年齡', trigger: 'blur' }
],
address: [
{ required: true, message: '請(qǐng)輸入地址', trigger: 'blur' }
],
hobbies: [
{ type: 'array', required: true, message: '請(qǐng)至少選擇一個(gè)愛(ài)好', trigger: 'change' }
]
},
// 表單提交
submitForm(formName) {
this.$refs[formName].validate((valid) =>{
if (valid) {
console.log(this.form)
} else {
console.log('error submit!!')
return false
}
})
}

我們可以使用自定義驗(yàn)證規(guī)則定義數(shù)據(jù)驗(yàn)證規(guī)則。這是一個(gè)非常重要且常用的功能。我們?cè)谔峤槐韱螘r(shí)使用validate方法來(lái)判斷表單是否合法。如果表單數(shù)據(jù)不為valid，我們就不能提交表單。

在Vue編程中，表單是一個(gè)重要的編程元素。它可以讓我們更準(zhǔn)確地掌握數(shù)據(jù)：

// 獲取表單數(shù)據(jù)并打印
console.log(this.form)