VUE 實現tab切換頁面效果
一 163郵箱登陸tab切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul li { list-style: none; display: inline-block; border: 1px solid dodgerblue; height: 30px; line-height: 30px; width: 120px; text-align: center; } </style> <script src="vue.js"></script> </head> <body> <div id="box"> <ul> <li v-on:click="qh(true)"> <span >二維碼登陸</span> </li> <li v-on:click="qh(false)"> <span >郵箱登陸</span> </li> </ul> <div style="margin-left:80px" v-if="temp"> <img src="getUrlQrcode.jpg" alt=""> </div> <div style="margin-left:80px" v-if="!temp"> <form action="https://mail.163.com/" method="post"> <p><input type="email"></p> <p><input type="password"></p> <p><input type="submit" value="登陸"></p> </form> </div> </div> <script> new Vue({ el: '#box', data: { temp:true }, methods:{ qh:function (t) { console.log(t); this.temp=t } } }) </script> </body> </html>
二 實現效果
三 Tab切換多頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> ul li { list-style: none; display: inline-block; border: 1px solid dodgerblue; height: 30px; line-height: 30px; width: 120px; text-align: center; } </style> <!-- 引用vue.js文件 --> <script src="vue.js"></script> </head> <div id="app"> <ul> <!--- 給li標籤綁定click時間,點擊該li標籤將索引傳給函數從新賦值給num---> <li v-for="(index,item) in tabs" :class="{active:index == num}" @click="tab(index)"> {{item}}{{index}} </li> </ul> <div class="tabCon"> <!--- 循環遍歷tabContents數組中的元素,v-show綁定事件,當循環的索引等於num中的值,顯示該itemCon值 ---> <div v-for='(index,itemCon) in tabContents' v-show="index == num"> {{itemCon}}{{index}} </div> </div> </div> <!--這裏是js代碼--> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { tabs: ["標題一", "標題二","標題三"], tabContents: ["內容一", "內容二","內容三"], num: '' }, methods: { tab:function (index) { this.num = index; } } }); </script>
四 Tab切換多頁面效果
相關文章
- 1. vue transition實現頁面切換效果
- 2. 用CSS實現Tab頁切換效果
- 3. Vue.js實現tab切換效果
- 4. vue頁面切換效果（slide效果切換）
- 5. React實現tab切換效果
- 6. jQuery實現tab標籤切換效果
- 7. jQuery實現tab欄切換效果
- 8. vue實現tab切換
- 9. vue-cli實現tab切換
- 10. Flutter實現Tab切換頁面
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • XSL-FO 頁面 - XSL-FO 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue transition實現頁面切換效果
- 2. 用CSS實現Tab頁切換效果
- 3. Vue.js實現tab切換效果
- 4. vue頁面切換效果（slide效果切換）
- 5. React實現tab切換效果
- 6. jQuery實現tab標籤切換效果
- 7. jQuery實現tab欄切換效果
- 8. vue實現tab切換
- 9. vue-cli實現tab切換
- 10. Flutter實現Tab切換頁面