文章詳情頁

VUE的tab頁面切換的四種方法

瀏覽：2日期：2022-09-30 14:27:33

1.靜態實現方法:

效果圖:

VUE的tab頁面切換的四種方法

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>view的tab交互</title> <link rel='stylesheet' href='http://www.aoyou183.cn/css/demo.css' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></head><body><div id='my'><ul class='tab_tit'> <li : @click='n=1'>標題一</li> <li : @click='n=2'>標題二</li> <li : @click='n=3'>標題三</li> <li : @click='n=4'>標題四</li></ul><div class='tab_con'> <div v-show='n==1'>內容一</div> <div v-show='n==2'>內容二</div> <div v-show='n==3'>內容三</div> <div v-show='n==4'>內容四</div></div></div><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> Vue.config.productionTip=false </script> <script src='http://www.aoyou183.cn/js/tab.js' type='text/javascript'></script></body></html>

css

*{ margin: 0; padding: 0; box-sizing:border-box;}body,html{ height: 100%;}.demo_warp .tab_tit { display: flex; flex: 1; margin:.2rem;}.demo_warp .active { color:red; background-color: cadetblue;}.demo_warp ul li { list-style: none; width: 23%; text-align: center; background-color: #ccc; margin:0 1%;}.demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center;}

window.onload=function(){ new Vue({ el:’#my’, data:{//響應式的數據 data變化頁面也會跟著變化 n:1 } })}2.第二種模擬動態方法

效果如上圖所示:（省略）代碼:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>view的tab交互</title> <link rel='stylesheet' href='http://www.aoyou183.cn/css/demo.css' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></head><body><div id='my'><ul class='tab_tit'> <li v-for='(v,i) in title' : @click='n=i'>{{v}}</li></ul><div class='tab_con'> <div v-for='(v,i) in con' v-show='n==i'>{{v}}</div></div></div><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> Vue.config.productionTip=false </script> <script src='http://www.aoyou183.cn/js/tab.js' type='text/javascript'></script></body></html>

css

window.onload=function(){ new Vue({ el:’#my’, data:{//響應式的數據 data變化頁面也會跟著變化 n:0, title:['標題一','標題二','標題三','標題四'], con:['內容一','內容二','內容三','內容四'] } })}3.第三種動態數據方法

效果圖:(滾動條的實現方式)

VUE的tab頁面切換的四種方法

代碼:

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>view的tab交互</title> <link rel='stylesheet' href='http://www.aoyou183.cn/css/demo.css' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></head><body><div id='my'><ul class='tab_tit'> <li v-for='(v,i) in lists' : @click='n=i'>{{v.title}}</li></ul><div class='tab_con'> <div v-for='(v,i) in lists' v-show='n==i'>{{v.con}}</div></div></div><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> Vue.config.productionTip=false </script> <script src='http://www.aoyou183.cn/js/tab.js' type='text/javascript'></script></body></html>

css

*{ margin: 0; padding: 0; box-sizing:border-box;}body,html{ height: 100%;}.demo_warp .tab_tit{ display: flex; justify-content: space-between; white-space: nowrap; overflow-y: hidden; overflow-x: scroll; margin:1% 1% 1% 0;} ::-webkit-scrollbar{ display: none; }.demo_warp .active { color:red; background-color: cadetblue;}.demo_warp ul li { list-style: none; padding:1.2% 3.2%; text-align: center; background-color: #ccc; margin-left: 1%;}.demo_warp .tab_con { width: 100%; height: 3rem; border:1px solid rgb(85, 85, 177); text-align: center;}

window.onload=function(){ new Vue({ el:’#my’, data:{//響應式的數據 data變化頁面也會跟著變化 n:0, lists:[//可以有很多條數據//數組對象的形式 {title:’標題一’,con:’內容一’}, {title:’標題二’,con:’內容二’}, {title:’標題三’,con:’內容三’}, {title:’標題四’,con:’內容四’}, {title:’標題五’,con:’內容五’}, {title:’標題六’,con:’內容六’}, {title:’標題七’,con:’內容七’}, {title:’標題八’,con:’內容八’}, ] } })}4.動態實現方法(模擬后臺數據實現)

效果圖:

VUE的tab頁面切換的四種方法

代碼:

<html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>view的tab交互</title> <link rel='stylesheet' type='text/css' href='http://www.aoyou183.cn/css/demo.css' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></head><body><div id='my'> <ul class='tab_tit'> <li v-for='(v,i) in lists' : @click='m=i' :key='i.title'>{{v.title}}</li> </ul>  <div class='tab_con'> <div v-for='(v,i) in lists' v-show='m==i' :key='i.con'>{{v.con}}</div> </div> <ul class='tab_tit'> <li v-for='(item, index) in itemList' : @click='n=index' :key='index'>{{item.name}}</li></ul><div class='tab_con'> <div v-for='(item, index) in itemList' v-show='n==index' :key='index'>{{item.state}}</div></div></div><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script><script> Vue.config.productionTip=false </script> <script src='http://www.aoyou183.cn/node_modules/axios/dist/axios.js'></script><script src='http://www.aoyou183.cn/js/tab.js' type='text/javascript'></script></body></html>

css

tab.js

nodeServer.js

/* connect 是一個node中間件 (middeware)框架如果把一個http處理過程比作是污水處理中間件就像是一層層的過濾網每個中間件把http處理過程中通過改寫 request或(和)response的數據、狀態、實現了特定的功能中間件就是類似于一個過濾器的東西在客戶端和應用程序之間的一個處理請求和響應的方法. *///創建中間介啟動服務 node node.js var connect = require(’connect’);//創建連接var bodyParser=require(’body-parser’);//body解析用于處理 JSON、RAW、Text和URL編碼的數據.var lists = {};var app = connect() .use(bodyParser.json())//JSON解析 .use(bodyParser.urlencoded({extended:true})) //use()方法還有一個可選的路徑字符串對傳入請求的URL的開始匹配 //use()方法來維護一個中間件隊列 .use(function(req,res,next){ //跨域處理 //website you wish to allow to connect res.setHeader(’Access-Control-Allow-origin’,’*’);//允許任何源 //Request Methods you width to allow res.setHeader(’Access-Control-Allow-Methods’,’CET’,’POST’,’OPTIONS’,’PUT’,’PATCH’,’DELETE’);//允許任何方法 //Request headers you wish to allow res.setHeader(’Access-Control-Allow-Headers’,’*’);//允許任何類型 res.writeHead(200,{'Content-Type':'text/plain/xml;charset=utf-8'});//utf-8轉碼 next();//next方法就是一個遞歸調用 }) .use(’/list’,function(req,res,next){ var data={ 'code':'200', 'msg':'success', 'result':[ {name:'手機',state:'采購一'}, {name:'包包',state:'采購二'}, {name:'衣服',state:'采購三'}, {name:'電腦',state:'采購四'}, {name:'電子產品',state:'采購五'} ] } res.end(JSON.stringify(data)); next(); }) .use(’/list_get’,function(req,res,next){ var data={ 'code':’200’, 'msg':'success', 'result':lists } res.end(JSON.stringify(data)); next(); }) .use(’/list_add’,function(req,res,next){ if(req.method==’POST’){ console.log(req.body.name); lists.push({name:req.body.name,state:req.body.state,id:index++}); var data={'code':200,'msg':'success'}; res.end(JSON.stringify(data)); }else{ res.end(JSON.stringify({})); } next(); }) .use(’/list_del’,function(req,res,next){ console.log(req.body.id); //lists=lists.filter(list=>list.id!=req.body.id); for(var i=0;i<lists.length;i++){ if(req.body.id===lists[i].id){ lists.splice(i,1); } } console.log(lists); var data={'code':200,'msg':'success'}; res.end(JSON.stringify(data)); next(); }) .listen(4000); console.log(’Server started on port 4000.’);

插件:（需要下載的插件）

VUE的tab頁面切換的四種方法

1.先啟動服務node nodeServer.js（不能關閉，否則就會調取不到數據）2.之后運行html頁面。

項目遇到的bug:

vue中v-for循環遍歷后，當前內容不渲染的問題,因為this指向的問題導致.

解決方法一:

VUE的tab頁面切換的四種方法

解決方法二:

VUE的tab頁面切換的四種方法

解決方法三:

VUE的tab頁面切換的四種方法

總結:url：接口要寫自己后臺的接口哦，這里只是模擬的接口,nodeServer.js文件可以定義多種格式的數據類型，也可以在本地自定義嵌套多種需要的類型，先試用之后可以在調后臺數據。

推薦學習VUE：文檔 ::https://cn.vuejs.org/v2/guide/list.html

到此這篇關于VUE的tab頁面切換的四種方法的文章就介紹到這了,更多相關VUE tab頁面切換內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！

Vue

上一條：vue2.x 從vue.config.js配置到項目優化下一條：如何啟動一個Vue.js項目

相關文章：

1. ASP基礎入門第三篇(ASP腳本基礎)2. PHP循環與分支知識點梳理3. 解析原生JS getComputedStyle4. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁5. ASP刪除img標簽的style屬性只保留src的正則函數6. ASP實現加法驗證碼7. 讀大數據量的XML文件的讀取問題8. css代碼優化的12個技巧9. 利用CSS3新特性創建透明邊框三角10. 前端從瀏覽器的渲染到性能優化

排行榜

					
					django從后臺返回html代碼的實例
基于SpringBoot bootstrap.yml配置未生效的解決
Docker容器如何更新打包并上傳到阿里云
Docker容器網絡端口配置過程詳解
IntelliJ IDEA導入jar包的方法
IntelliJ IDEA導入項目的方法
idea設置自動導入依賴的方法步驟
python實現線性回歸算法
ASP.NET MVC使用異步Action的方法
Vue如何提升首屏加載速度實例解析
Java JUC中操作List安全類的集合案例
				