<div id="card"> <div class="title"> <span @click="num=key" :class="change(key)" v-for="title,key in title_list">{{title}}</span> </div> <div class="content"> <span class="list" :class="change(key,‘active‘)" v-for="content,key in content_list">{{content}}</span> </div> </div> <script脚本代码> var card = new Vue({ el:"#card", data:{ num: 0, title_list:[ "国内新闻", "国际新闻", "银河新闻" ], content_list:[ "国内新闻列表", "国际新闻列表", "银河新闻列表" ] }, methods:{ change(data,style=‘current‘){ if(this.num==data){ return style; } } } }); </script脚本代码>
这里要自己添加style样式,可以参考以上切换选项卡的文章里的样式配置
原文地址:https://www.cnblogs.com/eliwen/p/12031989.html
时间: 2024-10-12 20:01:45