Vue.js实现选项卡切换

以前都是看大神们写的博客，现在自己也想试一试，(*^▽^*)

第一次写博客，感觉好激动啊，不知道先写点啥，哈哈

突然想学习Vue了，就先做个小demo吧！！！

 

css样式：

 1 <style>
 2   *{
 3     margin: 0;
 4     padding: 0;
 5   }
 6   #app{
 7     width: 800px;
 8     margin: 0 auto;
 9   }
10   a{
11     text-decoration: none;
12     height: 50px;
13     width: 25%;
14     background-color: lightblue;
15     float: left;
16     line-height: 50px;
17     text-align: center;
18   }
19   .box{
20     border: 1px solid #ccc;
21     height: 400px;
22   }
23 </style>

html内容：

 1 <div id="app">
 2   <div class="tab">
 3     <a href="#" @click="tabId=0" class="{tabId=0}">前端框架</a>
 4     <a href="#" @click="tabId=1" class="{tabId=1}">Vue</a>
 5     <a href="#" @click="tabId=2" class="{tabId=2}">Angular</a>
 6     <a href="#" @click="tabId=3" class="{tabId=3}">React</a>
 7   </div>
 8   <div class="box">
 9     <div v-show="tabId===0">111</div>
10     <div v-show="tabId===1">222</div>
11     <div v-show="tabId===2">333</div>
12     <div v-show="tabId===3">444</div>
13   </div>
14 </div>

js内容：

1 <script src="node_modules/vue/dist/vue.min.js"></script>
2 <script>
3   new Vue ({
4   el:'#app',
5   data:{
6     tabId:1
7   }
8 })
9 </script>

 

 博客现在玩的不是很6，我得好好研究研究，(#^.^#)

我也要向大神们学习，多努力，每天进步一点点！！！

posted @ 2017-11-29 23:28  懒人如巍  阅读(9659)  评论(0)  编辑  收藏  举报