vue-demo-tab切換
阿新 • • 發佈：2017-05-09
-o asset align tab line isp body wid scrip
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue項目</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> <style> #list{ winth:600px; height:50px; } #list li{ width:100px; height:50; margin:0 5px; background:red; float:left; list-style:none; text-align:center; line-height:50px; } div.content{ width:200px; height:200px; background:yellow; display:none; } </style> </head> <body> <div id="app_head"> <ul id=‘list‘> <li v-for="i in todos" v-on:click="fn1($index)" index=‘{{$index}}‘>{{i.text}}</li> </ul> <div class=‘content‘ v-for="i in todos">{{i.text}}</div> </div> <script> new Vue({ el:‘#app_head‘,//元素 data:{//數據 todos: [ { text: ‘首頁‘ }, { text: ‘新聞資訊‘ }, { text: ‘產品展示‘ }, { text: ‘關於我們‘ }, { text: ‘聯系我們‘ } ], fn1:function($index){ $(‘.content‘).css(‘display‘,‘none‘); $(‘.content‘).eq($index).css(‘display‘,‘block‘); } } }); $(‘.content‘).eq(0).css(‘display‘,‘block‘); </script> </body> </html>
vue-demo-tab切換