[TOC] #### 1.表單控件處理之使用vue控制input與textarea表單項 <div id="hdcms"> 標題<input type="text" class="form-control" v-model="field.title"> 點擊數<input type="text" class="form-control" v-model="field.click"> 鏈接<input type="text" class="form-control" v-model="field.url"> 摘要<textarea name="" class="form-control" v-model="field.description"></textarea> </div> <script> var app = new Vue({ el: '#hdcms', data: { field: { title: '后盾人 人人做后盾', click: 399, url: 'houdunren.com', description: '這是內容接要', draft: false, flag: [] } }, methods: {} }); </script> #### 2.表單控件處理之checkbox復選框的幾種使用方式實例講解 <div id="hdcms"> <input type="checkbox" v-model="field.flag" value="hot"> 熱門 <input type="checkbox" v-model="field.flag" value="recommend"> 推薦 <input type="checkbox" v-model="field.draft"> 草稿 </div> <script> var app = new Vue({ el: '#hdcms', data: { field: { title: '后盾人 人人做后盾', click: 399, url: 'houdunren.com', description: '這是內容接要', draft: false, flag: [] } }, methods: {} }); </script> #### 3.表單控件處理之使用vue控制radio表單的實例操作 <div id="hdcms"> <input type="radio" v-model="field.type" value="draft"> 草稿 <input type="radio" v-model="field.type" value="send"> 發布 </div> <script> var app = new Vue({ el: '#hdcms', data: { field: { title: '后盾人 人人做后盾', click: 399, url: 'houdunren.com', description: '這是內容接要', type: 'send', flag: [] } }, methods: {} }); </script> #### 4.表單控件處理之使用vue控制select操作文章欄目列表 multiple:多選 <div id="hdcms"> <select v-model="field.cid" class="form-control" multiple> <option value="">==請選擇欄目==</option> <option v-for="v in category" :value="v.cid">{{v.title}}</option> </select> </div> <script> var app = new Vue({ el: '#hdcms', data: { category: [ {cid: 1, title: 'hdphp新聞'}, {cid: 2, title: 'HDCMS'}, {cid: 3, title: '后盾人新聞'}, {cid: 4, title: '后盾IT教育新聞'} ], field: { title: '后盾人 人人做后盾', click: 399, url: 'houdunren.com', description: '這是內容接要', type: 'send', flag: [], cid: [] } }, methods: {} }); </script> #### 5表單控件處理之動態綁定文章的屬性處理方法 <div id="hdcms"> <div class="checkbox-inline" v-for="v in flag"> <input type="checkbox" v-model="field.flag" :value="v.name"> {{v.title}} </div> <div class="radio-inline" v-for="v in type"> <input type="radio" v-model="field.type" :value="v.name"> {{v.title}} </div> </div> <script> var app = new Vue({ el: '#hdcms', data: { type:[ {name:'draft',title:'草稿'}, {name:'send',title:'正式發布'}, {name:'times',title:'延遲發布'} ], flag:[ {name:'hot',title:'熱門'}, {name:'recommend',title:'推薦'} ], category: [ {cid: 1, title: 'hdphp新聞'}, {cid: 2, title: 'HDCMS'}, {cid: 3, title: '后盾人新聞'}, {cid: 4, title: '后盾IT教育新聞'} ], field: { title: '后盾人 人人做后盾', click: 399, url: 'houdunren.com', description: '這是內容接要', type: 'send', flag: [], cid: [] } }, methods: {} }); </script> #### 6.表單控件處理之表單修飾符.lazy.number.trim實例詳解 <div id="hdcms"> <input type="number" class="form-control" v-model.number="field.click"> <input type="text" class="form-control" v-model.trim.lazy="field.title"> </div> <script> var app = new Vue({ el: '#hdcms', watch: { 'field.click': function (n, o) { console.log(typeof(n)); }, 'field.title':function(n,o){ console.log(n.length); } }, data: { field: { title: '后盾人 人人做后盾', click: 100, } }, methods: {} }); </script>