vue實現tab頁
阿新 • • 發佈：2018-11-17
<!DOCTYPE html> <html> <head> <title>tab</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script type="text/javascript" src='js/vue.js'></script> <script type="text/javascript" src='js/index.js'></script> </head> <!-- 思想： 其實tab切換分兩大塊，上面的哪一行是一個ul，裡面有四個li，下面的內容是四個div只不過只顯示一個，其內容對應上面的li 現在要做的就是點選li時顯示對應的div。所以當我們點選li時可以獲取其index值，然後顯示對應index的div。 --> <body> <div id="my"> <div class="myTab"> <ul class="tab-tit"> <!-- 遍歷lists獲取title的值以及index，點選時獲取該index並將其傳給num。 --> <li v-for="(v,i) in lists" @click="change(i)" :class="{'active':num==i}"> {{v.title}} </li> </ul> <div> <!-- 遍歷lists獲取content的值以及index，顯示index==num的div，這個num對應的是title的index --> <div v-for="(v,i) in lists" v-show="num==i"> {{v.content}} </div> </div> </div> </div> </body> </html>
window.onload=function(){ new Vue({ el:'#my',//掛載元素 data:{ num:0, lists:[ {title:'AAA',content:'aaa'}, {title:'BBB',content:'bbb'}, {title:'CCC',content:'ccc'}, {title:'DDD',content:'ddd'} ] }, methods:{//change方法，點選時將點選的title的index傳給num，通過num來控制顯示的cntent內容 change:function(i){ this.num=i; } } }); }