[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>