以前都是看大神们写的博客,现在自己也想试一试,(*^▽^*)
第一次写博客,感觉好激动啊,不知道先写点啥,哈哈
突然想学习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,我得好好研究研究,(#^.^#)
我也要向大神们学习,多努力,每天进步一点点!!!