Vue练习二:01_02_网页换肤
Demo 在线地址:
https://sx00xs.github.io/test/2/index.html
-----------------------------------------------------
IDE: vscode
文件格式:.vue
解析:(待补)
<template> <div id="app"> <div class="outer"> <ul class="skin"> <li v-for="skin in skins" :key="skin.title" :class="[{current:skin.isActive}, skin.cla]" :title="skin.title" @click="handleChangeSkin(skin.cla)" > {{skin.value}} </li> </ul> <ul class="nav" :style="{background:activeColor}"> <li v-for="(nav,index) in navs" :key="nav" :class="{last:index===navs.length-1}"> <a href="#">{{nav}}</a> </li> </ul> </div> </div> </template> <script> export default { data:function(){ return{ activeColor:'green', activeBackground:'#a3c5a8', skins:[ { cla:'red', title:'红色', value:'red', isActive:false }, { cla:'green', title:'绿色', value:'green', isActive:true }, { cla:'black', title:'黑色', value:'black', isActive:false } ], navs:['新闻','娱乐','体育','电影','音乐','旅游'] } }, methods:{ handleChangeSkin(val){ switch(val){ case "red": for(var i=0;i<this.skins.length;i++){ this.skins[i].isActive=false; } for(var i=0;i<this.skins.length;i++){ if(this.skins[i].cla===val){ this.skins[i].isActive=true; } } document.body.style.background="#ffdddd"; this.activeColor='red'; break; case "green": for(var i=0;i<this.skins.length;i++){ this.skins[i].isActive=false; } for(var i=0;i<this.skins.length;i++){ if(this.skins[i].cla===val){ this.skins[i].isActive=true; } } document.body.style.background=this.activeBackground; this.activeColor='green'; break; case "black": for(var i=0;i<this.skins.length;i++){ this.skins[i].isActive=false; } for(var i=0;i<this.skins.length;i++){ if(this.skins[i].cla===val){ this.skins[i].isActive=true; } } document.body.style.background="#cccccc"; this.activeColor='black'; break; } } } } </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步