Vue美团电影模拟实现
由于没有接口，只能算个半成品。但是我认为需要的请求参数都有获取，一旦有接口可以轻松请求数据。
请求参数代码中有注释。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>电影票</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style lang="less"> *{margin: 0;padding: 0;} ul li{ list-style: none; } li{ display: inline-block; } .head{ background: #47464a; height: 60px; text-align: center; } .head ul li { padding:0 50px; line-height: 60px; color:#999; cursor: pointer; } .active{ color:red!important; } .ListBox{ margin:30px auto; border:1px solid gainsboro; } .ListBox>div{ padding:20px; border-bottom: 1px solid gainsboro; } dt{ font-size: 14px; color:#999; display: inline-block; cursor: pointer; } dd{ font-size: 14px; padding: 3px 9px; margin-left: 12px; color:#333; display: inline-block; cursor: pointer; } .L_active{ background: #f34d41; border-radius: 14px; color:#fff; appearance: none; } main{ width:1200px; margin:0 auto; } .choose_box{ font-size: 14px; } input[type=radio]{ height:15px; width:15px; vertical-align: middle; } label{ cursor: pointer; margin-right:20px ; } .z_title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align: center; } .pingfen{ text-align: center; } .item_li{ display: inline-block; width:160px; margin-right: 30px; } .item_box{ margin-top: 20px; } </style> </head> <body> <div id="app"> <!-- 头部 --> <div class="head"> <ul> <li v-for="n in hList" :key="n.id" :class="{active:current==n.id?true:false}" @click="handleChange(n.id)">{{n.name}}</li> </ul> </div> <!-- 中间内容 --> <main> <!-- 类别组件 --> <list></list> <!-- 排序组件 --> <choose></choose> <!-- 电影列表组件 --> <myitem></myitem> </main> </div> <script> var Myitem = { data(){ return{ ItemArr:[ { _id:"001", src:"https://p0.meituan.net/movie/37e835fdaf68e48dd002b6757374251d6793835.jpg@160w_220h_1e_1c", title:"紫罗兰永恒花园 外传：永远与自动手记人偶", pingfen:9.5 } ] } }, template:` <div class="item_box"> <ul> <li v-for="n in ItemArr" :key="n.id" class="item_li"> <img :src="n.src"> <p class="z_title">{{n.title}}</p> <p class="pingfen">{{n.pingfen}}</p> </li> </ul> </div> `, methods: { }, } var Choose={ data(){ return{ picked:"hot" } }, template:` <div class="choose_box"> <label for="hot"> <input type="radio" id="hot" v-model="picked" value="hot"> <span>按热门排序</span> </label> <label for="time"> <input type="radio" id="time" v-model="picked" value="time"> <span>按时间排序</span> </label> <label for="tlak"> <input type="radio" id="tlak" v-model="picked" value="tlak"> <span>按评价排序</span> </label> </div> `, methods: { }, } var List = { data(){ return{ TypeArr:[{ id:"001", name:"全部" },{ id:"002", name:"爱情" },{ id:"003", name:"喜剧" },{ id:"004", name:"动画" },{ id:"005", name:"剧情" },{ id:"006", name:"恐怖" },{ id:"007", name:"纪录片" },{ id:"008", name:"短片" },{ id:"009", name:"黑色电影" },{ id:"010", name:"歌舞" },{ id:"011", name:"传记" },{ id:"012", name:"历史" },{ id:"013", name:"武侠" },{ id:"014", name:"战争" },{ id:"015", name:"古装" },{ id:"016", name:"悬疑" },{ id:"017", name:"动作" },{ id:"018", name:"其他" }], CityArr:[{ id:"001", name:"全部" },{ id:"002", name:"大陆" },{ id:"003", name:"美国" },{ id:"004", name:"欧美" },{ id:"005", name:"日韩" },{ id:"006", name:"中国香港" },{ id:"007", name:"中国澳门" },{ id:"008", name:"中国台湾" },{ id:"009", name:"法国" },{ id:"010", name:"德国" },{ id:"011", name:"荷兰" },{ id:"012", name:"新加坡" },{ id:"013", name:"加拿大" },{ id:"014", name:"其他" }], TimeArr:[{ id:"001", name:"全部" },{ id:"002", name:"2019" },{ id:"003", name:"2010" },{ id:"004", name:"2005" },{ id:"005", name:"2000" },{ id:"006", name:"1995" },{ id:"007", name:"1990" },{ id:"008", name:"1980" },{ id:"009", name:"1970" },{ id:"010", name:"1960" },{ id:"011", name:"1950" },{ id:"012", name:"更早" }], Type_active:"001", City_active:"001", Time_active:"001", TextArr:[] } }, methods: { handleType(id,name){ this.Type_active=id this.TextArr[0]=name }, handleCity(id,name){ this.City_active=id this.TextArr[1]=name }, handleTime(id,name){ this.Time_active=id this.TextArr[2]=name } }, template:` <div class="ListBox"> <div class="L_box_01"> <dl> <dt>类型:</dt> <dd v-for="n in TypeArr" :key="n.id" @click="handleType(n.id,n.name)" :class="{L_active:Type_active==n.id?true:false}">{{n.name}}</dd> </dl> </div> <div class="L_box_02"> <dl> <dt>区域:</dt> <dd v-for="n in CityArr" :key="n.id" @click="handleCity(n.id,n.name)" :class="{L_active:City_active==n.id?true:false}">{{n.name}}</dd> </dl> </div> <div class="L_box_03"> <dl> <dt>年代:</dt> <dd v-for="n in TimeArr" :key="n.id" @click="handleTime(n.id,n.name)" :class="{L_active:Time_active==n.id?true:false}">{{n.name}}</dd> </dl> </div> </div> ` } var app = new Vue({ el:"#app", data:{ hList:[{ id:"zhengzai", name:"正在热映" },{ id:"jijiang", name:"即将上映" },{ id:"jingdian", name:"经典电影" }], current:"zhengzai", }, methods: { handleChange(id){ this.current=id } }, components:{ List, Choose, Myitem } }) </script> </body> </html> 原文链接：https://www.cnblogs.com/hulaoban/p/14122393.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/5056
![[转]给你的网站增加护盾-开启SSL【白嫖】](https://www.cdnb.net/bbs/wp-content/themes/justnews/themer/assets/images/lazy.png "[转]给你的网站增加护盾-开启SSL【白嫖】缩略图")