37.VUE學習之-表單的綜合運用
阿新 • • 發佈：2019-01-10
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script type="text/javascript" src="../js/vue.js"></script> --> <style type="text/css"> .h1{ color: red; } .h2{ color: green; } img{ width: 150px; height: auto; } </style> </head> <body> <div id="hdcms"> <form action="" class="form-horizontal"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">文章管理</h3> </div> <div class="panel-body"> <div class="form-group"> <label for="" class="col-sm-2 control-label">標題</label> <div class="col-sm-10"> <input type="text" class="form-control" v-model.trim.lazy="field.title"> {{field.title}} </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">欄目</label> <div class="col-sm-10"> <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> {{field.cid}} </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">屬性{{field.flag}}</label> <div class="col-sm-10"> <div class="checkbox-inline" v-for="v in flag"> <input type="checkbox" v-model="field.flag" :value="v.name"> {{v.title}} </div> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">點選數</label> <div class="col-sm-10"> <input type="number" class="form-control" v-model.number="field.click"> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">連結</label> <div class="col-sm-10"> <input type="text" class="form-control" v-model="field.url"><br> <img :src="field.url" alt=""> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">摘要</label> <div class="col-sm-10"> <textarea name="" class="form-control" v-model="field.description"></textarea> </div> {{field.description}} </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">型別</label> <div class="col-sm-10"> <div class="radio-inline" v-for="v in type"> <input type="radio" v-model="field.type" :value="v.name"> {{v.title}} </div> {{field.type}} </div> </div> </div> </div> <button class="btn btn-primary col-sm-offset-2">儲存</button> </form> </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: { 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: 100, url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2034208240,2505314860&fm=26&gp=0.jpg', description: '這是內容接要', type: 'send', flag: [], cid: [] } }, methods: {} }); </script> </body> </html>
效果:
