案例 -- 選項卡內容切換 · 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> ~~~