案例 -- 选项卡内容切换 · Vue&&TypeSprict--基础总结

>[success] # 选项卡内容切换 ~~~ 1.实现的效果，点击对应title，展示对应的内容信息 ~~~ >[danger] ##### 技术思考点 ~~~ 1.点击展示对应信息，因此是频繁点击，所以这里不使用 v-if 2.下面案例可以改进这里案例用了三个ul，实际上可以生成一个ul，通过变更的数据，来改变li的个数，也不用v-show来控制 ~~~ >[danger] ##### 页面形成效果 ![](https://box.kancloud.cn/f63d3366d7effb6c080bae4287235de8_143x129.png) >[danger] ##### 代码 ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> .red { background: red; } #app div { display: none; } </style> <script src="./src/vue.js"></script> </head> <body> <div id="app"> <input v-for="item,i in tabData" type="button" v-bind:value="item.title" v-bind:class="{red:i === index}" v-on:click="tabHandle(i)" /> <ul v-for="item,j in tabData" v-show="index===j" > <li v-for="option in item.list"> {{option.subTitle}} </li> </ul> </div> <script> let tabData = [ { title:"新闻", list: [ { subTitle:'今天很好' }, { subTitle:'今天很好' }, { subTitle:'今天很好' } ] }, { title:'娱乐', list: [ { subTitle:'结婚了' }, { subTitle:'出轨了' } ] }, { title:'体育', list: [ { subTitle:'冠军' }, { subTitle:'冠军' } ] } ] let vm = new Vue({ el: '#app', data:{ // 只有计划好的数据，才能做相应reactive tabData, index:0 // 控制让哪一个面板显示的 }, methods: { tabHandle (i) { this.index = i; } } }) </script> </body> </html> ~~~