Vue自動表單是一種快速創建表單的方法,通過使用表單模型數據作為參數,可以快速創建輸入、選擇等表單元素。
以下是一段自動表單的代碼示例:
<template> <div> <form v-on:submit.prevent> <div v-for="(field, index) in formFields" :key="index"> <label :for="field.id">{{field.label}}</label> <input :type="field.type" :id="field.id" v-model="formData[field.name]"> </div> <button type="submit">提交</button> </form> </div> </template> <script> export default { data() { return { formFields: [ { label: '姓名', type: 'text', id: 'name', name: 'name' }, { label: '性別', type: 'radio', id: 'gender', name: 'gender', options: ['男', '女'] }, { label: '愛好', type: 'checkbox', id: 'hobbies', name: 'hobbies', options: ['游泳', '籃球', '足球'] }, { label: '年齡', type: 'number', id: 'age', name: 'age' }, ], formData: {} } } } </script>
在上面的代碼中,formFields 是一個數組,包含了表單所需的所有字段信息。formData 是一個對象,用于存儲表單數據。在模板中使用 v-for 循環渲染出每個表單元素,并綁定 v-model 到 formData 對應的屬性上。
借助 Vue 自動表單,我們可以快速創建標準的表單,節省了開發者的時間和精力。
上一篇json打開后亂碼
下一篇css背景透明 字不透明