选项卡：点击不同的按钮会显示不同的内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>vue选项卡学习</title> 8 <style> 9 .box{ 10 border:1px solid blueviolet; 11 height: 228px; 12 323px; 13 background-color: bisque; 14 } 15 16 </style> 17 <script type="text/javascript" src="./js/vue.js"></script> 18 <script type="text/javascript"> 19 window.onload= function(){ 20 var app = new Vue({ 21 el:"#app", 22 data:{ 23 tabId:0 24 } 25 }); 26 } 27 </script> 28 </head> 29 <body> 30 31 <div id="app"> 32 <!-- tab 选项 --> 33 <div class="tab"> 34 <!-- 制作选项卡头部的网页 click单击--> 35 <a href="#" @click="tabId=0" class="{tabId=0}"> 36 <!-- button 按钮 --> 37 <button style="background-color:blueviolet"> mysql</button> 38 </a> 39 <a href="#" @click="tabId=1" class="{tabId=1}"> 40 <button style="background-color:palevioletred">jquery</button> 41 </a> 42 <a href="#" @click="tabId=2" class="{tabId=2}"> 43 <button style="background-color:aqua">vue.js</button> 44 </a> 45 </div> 46 <br/> 47 <!-- box 内容 --> 48 <div class="box" > 49 <!-- 制作选项卡内容 === 是判断 --> 50 <div v-show="tabId===0" style="background-color:brown">mysql的内容 51 <img src="./微信图片_20181121185958.jpg"/> 52 </div> 53 <div v-show="tabId===1"> 54 <img src="./微信图片_20181121185952.jpg" width="300" height="200"/> 55 jquery的内容 56 </div> 57 <div v-show="tabId===2"> 58 <img src="./微信图片_20181121185947.jpg" width="320" height="200"/> 59 vue.js的内容 60 </div> 61 62 </div> 63 </div> 64 </body> 65 </html>