vue動態生成表單
一、下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value">{{ option.text }} </option> </select> <li v-for="(value,i) in addList" :key="value.id"> <input class="radio" type="radio" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默認的i下標也可以--> <label v-bind:for="value.value">{{value.value}}</label> <!--通過for 指定 上面元素的id 來觸發選中--> </li> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { options:[{ value:"用戶1", text: "新選項1", checked: false },{ value: "用戶2", text: "新選項2", checked: false }],//默認option列表 selected:"用戶2",//option 默認選擇項 addList:[{ value:"用1", text: "新項1", checked: false },{ value: "用2", text: "新項2", checked: false }], radio:"用2", }, methods:{ //函數 },created() { //Vue 初始化的默認載入事件 this.options.push({ value:"用戶3", text: "新選項3", checked: false }); }, }); </script> </html>
二、多選框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value">{{ option.text }} </option> </select> <li v-for="(value,i) in addList" :key="value.id" > <input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默認的i下標也可以--> <label v-bind:for="value.value">{{value.value}}</label> <!--通過for 指定 上面元素的id 來觸發選中--> </li> <div v-for="(checkOne,index) in checkList"> <input type="checkbox" :checked="checkStatusList.indexOf(checkOne.name)>=0"> <span>{{checkOne.name}}</span> </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { options:[{ value:"用戶1", text: "新選項1", checked: false },{ value: "用戶2", text: "新選項2", checked: false }],//默認option列表 selected:"用戶2",//option 默認選擇項 addList:[{ value:"用1", text: "新項1", checked: false },{ value: "用2", text: "新項2", checked: false }], radio:"用2", disabled:true,//設為true即可禁止按鈕點擊 checkList:[ {'name':'老王'}, {'name':'小張'}, {'name':'王伯'} ], checkStatusList:['老王']// }, methods:{ //函數 },created() { //Vue 初始化的默認載入事件 this.options.push({ value:"用戶3", text: "新選項3", checked: false }); },computed:{ // a computed getter }, }); </script> </html>
優化
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value">{{ option.text }} </option> </select> <li v-for="(value,i) in addList" :key="value.id" > <input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默認的i下標也可以--> <label v-bind:for="value.value">{{value.value}}</label> <!--通過for 指定 上面元素的id 來觸發選中--> </li> <div v-for="(checkOne,index) in checkList"> <input type="checkbox" :checked="checkStatusList.indexOf(checkOne.id)>=0"> <span>{{checkOne.name}}</span> </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { options:[{ value:"用戶1", text: "新選項1", checked: false },{ value: "用戶2", text: "新選項2", checked: false }],//默認option列表 selected:"用戶2",//option 默認選擇項 addList:[{ value:"用1", text: "新項1", checked: false },{ value: "用2", text: "新項2", checked: false }], radio:"用2", disabled:true,//設為true即可禁止按鈕點擊 checkList:[ {id:1,'name':'老王'}, {id:2,'name':'小張'}, {id:3,'name':'王伯'} ], checkStatusList:[1,3]// }, methods:{ //函數 },created() { //Vue 初始化的默認載入事件 this.options.push({ value:"用戶3", text: "新選項3", checked: false }); },computed:{ // a computed getter }, }); </script> </html>
一、禁止點擊
<button type="button" :disabled="disabled"></button> data:{ disabled:false//設為true即可禁止按鈕點擊 }
具體代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>v-for</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> </head> <body> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value">{{ option.text }} </option> </select> <li v-for="(value,i) in addList" :key="value.id" > <input class="radio" type="radio" :disabled="disabled" name="radios" v-bind:id="value.value" :value="value.value" v-model="radio" /> <!--用默認的i下標也可以--> <label v-bind:for="value.value">{{value.value}}</label> <!--通過for 指定 上面元素的id 來觸發選中--> </li> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { options:[{ value:"用戶1", text: "新選項1", checked: false },{ value: "用戶2", text: "新選項2", checked: false }],//默認option列表 selected:"用戶2",//option 默認選擇項 addList:[{ value:"用1", text: "新項1", checked: false },{ value: "用2", text: "新項2", checked: false }], radio:"用2", disabled:true//設為true即可禁止按鈕點擊 }, methods:{ //函數 },created() { //Vue 初始化的默認載入事件 this.options.push({ value:"用戶3", text: "新選項3", checked: false }); },computed:{ // a computed getter }, }); </script> </html>
拓展
vue遍歷select中option
可以在便利的option中加一層template <select> <template v-for='(li,index) in list'> <option>{{li}}</option> </template> </select>
具體代碼
從數據庫map映射下
拓展
<select class="BonusType" v-model="selected[0]" v-bind:disabled="disabled[0]" v-on:click="SelectClick"> <option v-bind:value="Item.id" v-for="Item in BonusType" v-bind:disabled="isActive[Item.id-1]?'disabled':null">{{Item.text}}</option> </select>