码迷,mamicode.com
首页 > 其他好文 > 详细

vue的选项卡功能

时间:2018-12-11 12:57:41      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:ati   doctype   scale   color   content   button   判断   pat   onload   

选项卡:点击不同的按钮会显示不同的内容

 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         width: 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>

 

vue的选项卡功能

标签:ati   doctype   scale   color   content   button   判断   pat   onload   

原文地址:https://www.cnblogs.com/sunzhiqi/p/10101186.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!