關(guān)于 前端的碎碎念6-vue初體驗(yàn)之打基礎(chǔ)

網(wǎng)友投稿 795 2022-05-29

Vue 是什么？

Vue (讀音 /vju?/，類似于 **view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架**

vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合

指令

本質(zhì)就是自定義屬性

Vue中指定都是以 v- 開頭

v-cloak

防止頁面加載時(shí)出現(xiàn)閃爍問題

??? ????/*? ??????1、通過屬性選擇器?選擇到?帶有屬性?v-cloak的標(biāo)簽??讓他隱藏 ???*/ ????[v-cloak]{ ??????/*?元素隱藏????*/ ??????display:?none; ????} ???? ?? ???? ?????? ??????{{??msg?}}

????

???? ???? ??????var?vm?=?new?Vue({ ????????//??el???指定元素?id?是?app?的元素?? ????????el:?'#app', ????????//??data??里面存儲(chǔ)的是數(shù)據(jù) ????????data:?{ ??????????msg:?'Hello?Vue' ????????} ??????}); ?? ?? ??

v-text

v-text指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用于插值表達(dá)式類似，但是沒有閃動(dòng)問題

如果數(shù)據(jù)中有HTML標(biāo)簽會(huì)將html標(biāo)簽一并輸出

注意：此處為單向綁定，數(shù)據(jù)對(duì)象上的值改變，插值會(huì)發(fā)生變化；但是當(dāng)插值發(fā)生變化并不會(huì)影響數(shù)據(jù)對(duì)象的值

???? ????

????

???????? ????????{{msg}}??? ????

v-html

用法和v-text 相似但是他可以將HTML片段填充到標(biāo)簽中

可能有安全問題, 一般只在可信任內(nèi)容上使用?v-html，永不用在用戶提交的內(nèi)容上

它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會(huì)對(duì)其再進(jìn)行html解析，但v-html會(huì)將其當(dāng)html標(biāo)簽解析后輸出。

? ?????? ??????

? ?????? ??　　

? ??

?? ??

v-pre

顯示原始信息跳過編譯過程

跳過這個(gè)元素和它的子元素的編譯過程。

一些靜態(tài)的內(nèi)容不需要編譯加這個(gè)指令可以加快渲染

????{{?this?will?not?be?compiled?}}???? ???????? ????{{?msg?}}?? ?

v-once

執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)繼續(xù)更新】

????

????{{?info?}}

?? ?? ?? ????/* ??????v-once的應(yīng)用場(chǎng)景：如果顯示的信息后續(xù)不需要再修改，你們可以使用v-once，這樣可以提高性能。 ??????即使data里面定義了info?后期我們修改了?仍然顯示的是第一次data里面存儲(chǔ)的數(shù)據(jù)即?nihao? ????*/ ????var?vm?=?new?Vue({ ??????el:?'#app', ??????data:?{ ????????msg:?'Hello?Vue', ????????info:?'nihao' ??????} ????}); ??

雙向數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化

當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化

v-model是一個(gè)指令，限制在?、、components中使用</p><p><div?id="app"> ??????<div>{{msg}}</div> ??????<div> ????????當(dāng)輸入框中內(nèi)容改變的時(shí)候，??頁面上的msg??會(huì)自動(dòng)更新 ????????<input?type="text"?v-model='msg'> ??????</div> ????</div> ????<script?type="text/javascript"?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_50206.', ????????data:?{ ??????????msg:?'Hello?Vue' ????????} ??????}); ????</script></p><p>mvvm</p><p>MVC 是后端的分層開發(fā)概念； MVVM是前端視圖層的概念，主要關(guān)注于視圖層分離，也就是說：MVVM把前端的視圖層，分為了三部分 Model, View , VM ViewModel</p><p>m model</p><p>數(shù)據(jù)層 Vue 中數(shù)據(jù)層都放在 data 里面</p><p>v view 視圖</p><p>Vue 中 view 即我們的HTML頁面</p><p>vm （view-model）控制器將數(shù)據(jù)和視圖層建立聯(lián)系</p><p>vm 即 Vue 的實(shí)例就是 vm</p><p>v-on</p><p>用來綁定事件的</p><p>形式如：v-on:click 縮寫為 @click;</p><p>v-on事件函數(shù)中傳入?yún)?shù)</p><p><body> ????<div?id="app"> ????????<div>{{num}}</div> ????????<div> ???????????? ????????????<button?v-on:click='handle1'>點(diǎn)擊1</button> ???????????? ????????????<button?v-on:click='handle2(123,?456,?$event)'>點(diǎn)擊2</button> ????????</div> ????</div> ????<script?type="text/javascript"?src="js/vue.js"></script> ????<script?type="text/javascript"> ????????var?vm?=?new?Vue({ ????????????el:?'#app', ????????????data:?{ ????????????????num:?0 ????????????}, ????????????methods:?{ ????????????????handle1:?function(event)?{ ????????????????????console.log(event.target.innerHTML) ????????????????}, ????????????????handle2:?function(p,?p1,?event)?{ ????????????????????console.log(p,?p1) ????????????????????console.log(event.target.innerHTML) ????????????????????this.num++; ????????????????} ????????????} ????????}); ????</script></p><p>事件修飾符</p><p>在事件處理程序中調(diào)用?event.preventDefault()?或?event.stopPropagation()?是非常常見的需求。</p><p>Vue 不推薦我們操作DOM 為了解決這個(gè)問題，Vue.js 為?v-on?提供了事件修飾符</p><p>修飾符是由點(diǎn)開頭的指令后綴來表示的</p><p> <a?v-on:click.stop="doThis"></a>  <form?v-on:submit.prevent="onSubmit"></form>  <a?v-on:click.stop.prevent="doThat"></a>   <div?v-on:click.self="doThat">...</div> 使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用?v-on:click.prevent.self?會(huì)阻止所有的點(diǎn)擊，而?v-on:click.self.prevent? 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。</p><p>按鍵修飾符</p><p>在做項(xiàng)目中有時(shí)會(huì)用到鍵盤事件，在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為?v-on?在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符</p><p> <input?v-on:keyup.13="submit">  <input?v-on:keyup.enter="submit">  <input?type="text"?v-on:keyup.enter.space="alertMe"?> 常用的按鍵修飾符 .enter?=>????enter鍵 .tab?=>?tab鍵 .delete?(捕獲“刪除”和“退格”按鍵)?=>??刪除鍵 .esc?=>?取消鍵 .space?=>??空格鍵 .up?=>??上 .down?=>??下 .left?=>??左 .right?=>??右 <script> var?vm?=?new?Vue({ ????????el:"#app", ????????methods:?{ ??????????????submit:function(){}, ??????????????alertMe:function(){}, ????????} ????}) </script></p><p>自定義按鍵修飾符別名</p><p>在Vue中可以通過config.keyCodes自定義按鍵修飾符別名</p><p><div?id="app"> ????預(yù)先定義了keycode?116（即F5）的別名為f5，因此在文字輸入框中按下F5，會(huì)觸發(fā)prompt方法 ????<input?type="text"?v-on:keydown.f5="prompt()"> </div> <script> ????Vue.config.keyCodes.f5?=?116; ????let?app?=?new?Vue({ ????????el:?'#app', ????????methods:?{ ????????????prompt:?function()?{ ????????????????alert('我是?F5！'); ????????????} ????????} ????}); </script></p><p>v-bind</p><p>v-bind 指令被用來響應(yīng)地更新 HTML 屬性</p><p>v-bind:href 可以縮寫為 :href;</p><p> <img?v-bind:src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_19426.', ??????data:?{ ????????styleObject:?{ ??????????color:?'green', ??????????fontSize:?'30px', ??????????background:'red' ????????}， ????????activeColor:?'green', ??? fontSize:?"30px" ??????}, ??????styleObj1:?{ ?????????????color:?'red' ???????}, ???????styleObj2:?{ ????????????fontSize:?'30px' ???????} </script></p><p>分支結(jié)構(gòu)</p><p>1- 多個(gè)元素通過條件判斷展示或者隱藏某個(gè)元素。或者多個(gè)元素</p><p>2- 進(jìn)行兩個(gè)視圖之間的切換</p><p><div?id="app"> ???????? ????????<span?v-if="flag"> ???????????如果flag為true則顯示,false不顯示! ????????</span> </div> <script> ????var?vm?=?new?Vue({ ????????el:"#app", ????????data:{ ????????????flag:true ????????} ????}) </script> ---------------------------------------------------------- ????<div?v-if="type?===?'A'"> ???????A ????</div> ?? ????<div?v-else-if="type?===?'B'"> ???????B ????</div> ????<div?v-else-if="type?===?'C'"> ???????C ????</div> ?? ????<div?v-else> ???????Not?A/B/C ????</div> <script> ????new?Vue({ ??????el:?'#app', ??????data:?{ ????????type:?'C' ??????} ????}) </script></p><p>v-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏</p><p>v-show只編譯一次，后面其實(shí)就是控制css，而v-if不停的銷毀和創(chuàng)建，故v-show性能更好一點(diǎn)。</p><p>v-if是動(dòng)態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素</p><p>v-if切換有一個(gè)局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件</p><p>循環(huán)結(jié)構(gòu)</p><p>用于循環(huán)的數(shù)組里面的值可以是對(duì)象，也可以是普通元素</p><p><ul?id="example-1"> ??? ??<li?v-for="item?in?items"> ????{{?item.message?}} ??</li>? </ul> <script> ?new?Vue({ ??el:?'#example-1', ??data:?{ ????items:?[ ??????{?message:?'Foo'?}, ??????{?message:?'Bar'?} ????]， ??? ??} }) </script></p><p>不推薦同時(shí)使用?v-if?和?v-for</p><p>當(dāng)?v-if?與?v-for?一起使用時(shí)，v-for?具有比?v-if?更高的優(yōu)先級(jí)。</p><p>? ?????<div?v-if='v==13'?v-for='(v,k,i)?in?obj'>{{v?+?'---'?+?k?+?'---'?+?i}}</div> <script> ?new?Vue({ ??el:?'#example-1', ??data:?{ ????items:?[ ??????{?message:?'Foo'?}, ??????{?message:?'Bar'?} ????]， ????obj:?{ ????????uname:?'zhangsan', ????????age:?13, ????????gender:?'female' ????} ??} }) </script></p><p>key 的作用</p><p>key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)</p><p>key的作用主要是為了高效的更新虛擬DOM</p><p><ul> ??<li?v-for="item?in?items"?:key="item.id">...</li> </ul></p><p>案例選項(xiàng)卡</p><p><div?id="app"> ????????<div?class="tab"> ???????????? ????????????<ul> ????????????????<li?class="active">apple</li> ????????????????<li?class="">orange</li> ????????????????<li?class="">lemon</li> ????????????</ul> ?????????????? ????????????<div?class="current"><img?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_18081.png"></div> ????????????<div?class=""><img?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_14897.png"></div> ????????????<div?class=""><img?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_98099.png"></div> ????????</div> ????</div></p><p>list:?[{ ????????id:?1, ????????title:?'apple', ?????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_18081.png' ????????},? ????????{ ??????????id:?2, ??????????title:?'orange', ??????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_14897.png' ????????}, ????????{ ??????????id:?3, ??????????title:?'lemon', ??????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_98099.png' ??????????????? ??????}]</p><p>把tab欄中的數(shù)替換到頁面上</p><p>把 data 中 title 利用 v-for 循環(huán)渲染到頁面上</p><p>把 data 中 path利用 v-for 循環(huán)渲染到頁面上</p><p><div?id="app"> ??????????<div?class="tab">?? ??????????????<ul> ???????????????????? ?????????????????????<li?:key='item.id'?v-for='(item,index)?in?list'>{{item.title}}</li> ????????????????</ul> ????????????????<div??:key='item.id'?v-for='(item,?index)?in?list'> ?????????????????????? ??????????????????????<img?:src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_65841.', ??????????????data:?{ ??????????????????list:?[{ ??????????????????????id:?1, ??????????????????????title:?'apple', ??????????????????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_18081.png' ??????????????????},?{ ??????????????????????id:?2, ??????????????????????title:?'orange', ??????????????????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_14897.png' ??????????????????},?{ ??????????????????????id:?3, ??????????????????????title:?'lemon', ??????????????????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_98099.png' ??????????????????}] ??????????????} ??????}) ?? ??</script></p><p>4.1 、讓默認(rèn)的第一項(xiàng)tab欄高亮</p><p>通過動(dòng)態(tài)綁定class 來實(shí)現(xiàn) 第一個(gè)li 的索引為 0 和 currentIndex 的值剛好相等</p><p>currentIndex === index 如果相等則添加類名 active 否則添加空類名</p><p>tab欄高亮通過添加類名active 來實(shí)現(xiàn) （CSS active 的樣式已經(jīng)提前寫好）</p><p>在data 中定義一個(gè) 默認(rèn)的索引 currentIndex 為 0</p><p>給第一個(gè)li 添加 active 的類名</p><p>4.2 、讓默認(rèn)的第一項(xiàng)tab欄對(duì)應(yīng)的div 顯示</p><p style="text-align:center"><img src="http://m.bai1xia.com/news/zb_users/cache/ly_autoimg/n/Nzc4NA.jpg" alt="關(guān)于前端的碎碎念6-vue初體驗(yàn)之打基礎(chǔ)" title="關(guān)于前端的碎碎念6-vue初體驗(yàn)之打基礎(chǔ)" /></p><p>實(shí)現(xiàn)思路和第一個(gè) tab 實(shí)現(xiàn)思路一樣只不過這里控制第一個(gè)div 顯示的類名是 current</p><p>4.3 、點(diǎn)擊每一個(gè)tab欄當(dāng)前的高亮其他的取消高亮</p><p>給每一個(gè)li添加點(diǎn)擊事件</p><p>讓當(dāng)前的索引 index 和當(dāng)前 currentIndex 的值進(jìn)項(xiàng)比較</p><p>如果相等則當(dāng)前l(fā)i 添加active 類名當(dāng)前的 li 高亮當(dāng)前對(duì)應(yīng)索引的 div 添加 current 當(dāng)前div 顯示其他隱藏</p><p><!DOCTYPE?html> <html> <head> ??<meta?charset="UTF-8"> ??<title>Document</title> ??<style?type="text/css"> ???? ????.tab?ul?{ ??????overflow:?hidden; ??????padding:?0; ??????margin:?0; ????} ????.tab?ul?li?{ ??????box-sizing:?border-box; ??????padding:?0; ??????float:?left; ??????width:?100px; ??????height:?45px; ??????line-height:?45px; ??????list-style:?none; ??????text-align:?center; ??????border-top:?1px?solid?blue; ??????border-right:?1px?solid?blue; ??????cursor ????} ????.tab?ul?li:first-child?{ ??????border-left:?1px?solid?blue; ????} ????.tab?ul?li.active?{ ??????background-color:?orange; ????} ????.tab?div?{ ??????width:?500px; ??????height:?300px; ??????display:?none; ??????text-align:?center; ??????font-size:?30px; ??????line-height:?300px; ??????border:?1px?solid?blue; ??????border-top:?0px; ????} ????.tab?div.current?{ ??????display:?block; ????} ??</style> </head> <body> ??<div?id="app"> ????<div> ??????<ul> ? ????????<li?v-on:click='change(index)'?:class='currentIndex==index?"active":""'?:key='item.id'?v-for='(item,index)?in?list'>{{item.title}}</li> ??????</ul> ??????<div?:class='currentIndex==index?"current":""'?:key='item.id'?v-for='(item,?index)?in?list'> ????????<img?:src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_92260.', ??????data:?{ ????????currentIndex:?0,?//?選項(xiàng)卡當(dāng)前的索引 ????????list:?[{ ??????????id:?1, ??????????title:?'apple', ??????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_18081.png' ????????},{ ??????????id:?2, ??????????title:?'orange', ??????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_14897.png' ????????},{ ??????????id:?3, ??????????title:?'lemon', ??????????path:?'http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_98099.png' ????????}] ??????}, ??????methods:?{ ????????change:?function(index){ ??????????//?在這里實(shí)現(xiàn)選項(xiàng)卡切換操作：本質(zhì)就是操作類名 ??????????//?如何操作類名？就是通過currentIndex ??????????this.currentIndex?=?index; ????????} ??????} ????}); ??</script> </body> </html></p><p>案例選項(xiàng)卡</p><p>tab欄切換增強(qiáng)版</p><p>題目描述</p><p>點(diǎn)擊tab欄內(nèi)容區(qū)域顯示對(duì)應(yīng)的內(nèi)容</p><p>如點(diǎn)擊 SECTION 1 則內(nèi)容區(qū)域顯示對(duì)應(yīng) SECTION 1 的內(nèi)容同時(shí)當(dāng)前 SECTION的字體顏色變成藍(lán)色</p><p>第一步：將 list 中的數(shù)據(jù)title 渲染到左側(cè)和右側(cè)的tab欄中注意：左右各渲染3條數(shù)據(jù)</p><p>第二步：將 list 中的數(shù)據(jù)title 和 content 渲染到內(nèi)容區(qū)域</p><p>第三步：給左側(cè)的tab欄中的li綁定事件實(shí)現(xiàn)動(dòng)態(tài)切換active 類名注意：給點(diǎn)擊的當(dāng)前l(fā)i 添加類名 active 即可讓當(dāng)前的li字體顏色改變 (類名是 active的樣式已經(jīng)在CSS中提前定義好 )其他 li 需要移除類名 active</p><p>第四步：拿到當(dāng)前點(diǎn)擊li的索引讓內(nèi)容區(qū)域中對(duì)應(yīng)索引類名是 tab-pane 的 div 顯示注意：給類名是 tab-pane 的 div 添加類名 active 即可讓當(dāng)前div 顯示出來 (類名是 active的樣式已經(jīng)在CSS中提前定義好 )其他 tab-pane 的 div 需要移除類名 active</p><p>第五步：給右側(cè)的tab欄中的li綁定事件實(shí)現(xiàn)動(dòng)態(tài)切換active 類名注意：給點(diǎn)擊的當(dāng)前l(fā)i 添加類名 active 即可讓當(dāng)前的li字體顏色改變 (類名是 active的樣式已經(jīng)在CSS中提前定義好 )</p><p>第六步：拿到當(dāng)前點(diǎn)擊li的索引讓內(nèi)容區(qū)域中對(duì)應(yīng)索引類名是 tab-pane 的 div 顯示注意：這里需要注意索引問題：</p><p>點(diǎn)擊右側(cè)第一個(gè)div 的時(shí)候需要讓內(nèi)容區(qū)域中的第 4個(gè) div 顯示出來</p><p>點(diǎn)擊右側(cè)第2個(gè)div 的時(shí)候需要讓內(nèi)容區(qū)域中的第 5個(gè) div 顯示出來</p><p><!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> ????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"> ????<title>Document</title> ????<style> ????????*?{ ????????????margin:?0; ????????????padding:?0; ????????} ???????? ????????.vertical-tab?{ ????????????width:?920px; ????????????margin:?100px?auto; ????????} ???????? ????????.vertical-tab?.nav?{ ????????????list-style:?none; ????????????width:?200px; ????????} ???????? ????????.vertical-tab?.nav-tabs1?{ ????????????border-right:?3px?solid?#e7e7e7; ????????} ???????? ????????.vertical-tab?.nav-tabs2?{ ????????????border-left:?3px?solid?#e7e7e7; ????????} ???????? ????????.vertical-tab?.nav?a?{ ????????????display:?block; ????????????font-size:?18px; ????????????font-weight:?700; ????????????text-align:?center; ????????????letter-spacing:?1px; ????????????text-transform:?uppercase; ????????????padding:?10px?20px; ????????????margin:?0?0?1px?0; ????????????text-decoration:?none; ????????} ???????? ????????.vertical-tab?.tab-content?{ ????????????color:?#555; ????????????background-color:?#fff; ????????????font-size:?15px; ????????????letter-spacing:?1px; ????????????line-height:?23px; ????????????padding:?10px?15px?10px?25px; ????????????display:?table-cell; ????????????position:?relative; ????????} ???????? ????????.vertical-tab?.nav-tabs1?{ ????????????float:?left; ????????} ???????? ????????.vertical-tab?.tabs?{ ????????????width:?500px; ????????????box-sizing:?border-box; ????????????float:?left; ????????} ???????? ????????.vertical-tab?.tab-content?h3?{ ????????????font-weight:?600; ????????????text-transform:?uppercase; ????????????margin:?0?0?5px?0; ????????} ???????? ????????.vertical-tab?.nav-tabs2?{ ????????????float:?right; ????????} ???????? ????????.tab-content?{ ????????????position:?relative; ????????} ???????? ????????.tab-content?.tab-pane?{ ????????????position:?absolute; ????????????top:?10px; ????????????left:?20px; ????????} ???????? ????????.nav?li.active?a?{ ????????????color:?#198df8; ????????????background:?#fff; ????????????border:?none; ????????} ???????? ????????.fade?{ ????????????opacity:?0; ????????????transition:?all?.3s?linear; ????????} ???????? ????????.fade.active?{ ????????????opacity:?1; ????????} ????</style> </head> <body> ????<div?id="app"> ???????? ????????<ul?class="nav?nav-tabs1"> ????????????<li?v-on:click='change(index,0)'?:class='currentIndex==index?"active":""'?v-if="index?<?list.length/2"?v-for="(item,?index)?in?list"><a?href="#">?{{item.title}}?</a></li> ????????</ul> ???????? ????????<div?class="tab-content?tabs"> ????????????<div?class="tab-pane??fade"?:class='currentIndex==index?"active":""'?:key='item.id'?v-for='(item,?index)?in?list'> ????????????????<h3>{{item.title}}</h3> ????????????????<p>{{item.content}}</p> ????????????</div> ????????</div> ???????? ????????<ul?class="nav?nav-tabs2"> ????????????<li?v-on:click='change(index,1)'?:class='currentIndex==index?"active":""'?v-if="index?>=?list.length/2"?v-for="(item,?index)?in?list"><a?href="#">?{{item.title}}?</a></li> ????????</ul> ????</div> ????<script?type="text/javascript"?src="http://m.bai1xia.com/news/zb_users/upload/2022/05/20220529123647_79737.", ????????????data:?{ ????????????????currentIndex:?0,?//?選項(xiàng)卡當(dāng)前的索引 ????????????????list:?[{ ????????????????????id:?1, ????????????????????title:?'Section?1', ????????????????????content:?'content1' ????????????????},?{ ????????????????????id:?2, ????????????????????title:?'Section?2', ????????????????????content:?'content2' ????????????????},?{ ????????????????????id:?3, ????????????????????title:?'Section?3', ????????????????????content:?'content3' ????????????????},?{ ????????????????????id:?4, ????????????????????title:?'Section?4', ????????????????????content:?'content4' ????????????????},?{ ????????????????????id:?5, ????????????????????title:?'Section?5', ????????????????????content:?'content5' ????????????????},?{ ????????????????????id:?6, ????????????????????title:?'Section?6', ????????????????????content:?'content6' ????????????????}] ????????????}, ????????????methods:?{ ????????????????change(index,?flag)?{ ????????????????????if?(flag)?{ ????????????????????????console.log(index) ????????????????????????this.currentIndex?=?index; ????????????????????}?else?{ ????????????????????????this.currentIndex?=?index; ????????????????????} ????????????????} ????????????} ????????}) ????</script> </body></p><p>Vue</p><p> <strong>版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。</strong> </p></div> <div id="o2us0ew" class="article_footer clear"> <div id="c0wugyq" class="fr tag">標(biāo)簽：<a href="http://m.bai1xia.com/news/tags-117.html">關(guān)于</a> <a href="http://m.bai1xia.com/news/tags-1610.html">前端</a> <a href="http://m.bai1xia.com/news/tags-4942.html">碎碎念</a> </div> <div id="gokgqwo" class="bdsharebuttonbox fl share"> <div id="20ki0ka" class="share-widget fl"> <div id="uao2ka0" class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div>  <div id="0wsqaqw" class="post-navigation clear"> <div id="kcca2gi" class="post-previous fl"> <span>上一篇:</span><a href="http://m.bai1xia.com/news/post/7777.html">高層次下的分布式系統(tǒng)</a> </div> <div id="cieakae" class="post-next fr"> <span>下一篇:</span><a href="http://m.bai1xia.com/news/post/7785.html">單體應(yīng)用微服務(wù)改造實(shí)踐</a> </div> </div> </div> <div id="2gqykae" class="related_article"> <div id="iakec2c" class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相關(guān)文章</span> </div> <div id="kqsge0y" class="related_list clear"> <article class="fl"> <div id="og22q00" class="related_img"><a href="http://m.bai1xia.com/news/post/2906.html"><img src="http://m.bai1xia.com/news/zb_users/cache/ly_autoimg/m/MjkwNg.jpg"></a></div> <div id="aqq20km" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/2906.html" title="網(wǎng)頁鐘表設(shè)計(jì)——純<a target="_blank" href="http://m.bai1xia.com/news/tags-1610.html"style="font-weight:bold;">前端</a>實(shí)現(xiàn)">網(wǎng)頁鐘表設(shè)計(jì)——純<a target="_blank" href="http://m.bai1xia.com/news/tags-1610.html"style="font-weight:bold;">前端</a>實(shí)現(xiàn)</a></h3> <div id="2qmkum0" class="meta"> <span><i class="fa fa-eye"></i>795</span> <span><i class="fa fa-clock-o"></i>2022-05-29</span> </div> </div> </article> <article class="fl"> <div id="wyw0wyc" class="related_img"><a href="http://m.bai1xia.com/news/post/15452.html"><img src="http://m.bai1xia.com/news/zb_users/upload/2023/08/wenzhangerweima.jpg"></a></div> <div id="g0o0u08" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/15452.html" title="大<a target="_blank" href="http://m.bai1xia.com/news/tags-1610.html"style="font-weight:bold;">前端</a><a target="_blank" href="http://m.bai1xia.com/news/tags-78.html"style="font-weight:bold;">學(xué)習(xí)</a> -- NuxtJS學(xué)習(xí)筆記">大<a target="_blank" href="http://m.bai1xia.com/news/tags-1610.html"style="font-weight:bold;">前端</a><a target="_blank" href="http://m.bai1xia.com/news/tags-78.html"style="font-weight:bold;">學(xué)習(xí)</a> -- NuxtJS學(xué)習(xí)筆記</a></h3> <div id="gkisqim" class="meta"> <span><i class="fa fa-eye"></i>795</span> <span><i class="fa fa-clock-o"></i>2022-05-29</span> </div> </div> </article> <article class="fl"> <div id="yeq2w0k" class="related_img"><a href="http://m.bai1xia.com/news/post/33514.html"><img src="http://m.bai1xia.com/news/zb_users/upload/2023/08/wenzhangerweima.jpg"></a></div> <div id="mgcm0m0" class="related_detail"> <h3><a href="http://m.bai1xia.com/news/post/33514.html" title="<a target="_blank" href="http://m.bai1xia.com/news/tags-117.html"style="font-weight:bold;">關(guān)于</a>word中的多文檔窗口操作以下敘述中錯(cuò)誤的是"><a target="_blank" href="http://m.bai1xia.com/news/tags-117.html"style="font-weight:bold;">關(guān)于</a>word中的多文檔窗口操作以下敘述中錯(cuò)誤的是</a></h3> <div id="smw2ogy" class="meta"> <span><i class="fa fa-eye"></i>795</span> <span><i class="fa fa-clock-o"></i>2022-05-29</span> </div> </div> </article> </div> </div>  </div> </div> <div id="2aiice2" class="sidebar"> <div class="2oyueka" id="推薦文章" class="part clear 推薦文章"> <div id="sysomew" class="top"> <h3 class="title">推薦文章</h3> </div> <div id="ei0uegw" class="side 推薦文章"><ul><ul class="hot_posts"> <li><h4><a href="http://m.bai1xia.com/news/post/132763.html" title="企業(yè)生產(chǎn)管理是什么，企業(yè)生產(chǎn)管理軟件">企業(yè)生產(chǎn)管理是什么，企業(yè)生產(chǎn)管理軟件</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/136160.html" title="盤點(diǎn)進(jìn)銷存軟件排行榜前十名">進(jìn)盤點(diǎn)進(jìn)銷存軟件排行榜前十名</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132779.html" title="進(jìn)銷存系統(tǒng)哪個(gè)簡單好用？進(jìn)銷存系統(tǒng)優(yōu)點(diǎn)">進(jìn)銷存系統(tǒng)哪個(gè)簡單好用？進(jìn)銷存系統(tǒng)優(yōu)點(diǎn)</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/133648.html" title="工廠生產(chǎn)管理（工廠生產(chǎn)管理流程及制度）">工廠生產(chǎn)管理（工廠生產(chǎn)管理流程及制度）</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132780.html" title="生產(chǎn)管理軟件，機(jī)械制造業(yè)生產(chǎn)管理，制造業(yè)生產(chǎn)過程管理軟件">生產(chǎn)管理軟件，機(jī)械制造業(yè)生產(chǎn)管理，制造業(yè)生產(chǎn)過程管理軟件</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132776.html" title="進(jìn)銷存軟件和ERP有什么區(qū)別？進(jìn)銷存與erp軟件理解">進(jìn)銷存軟件和ERP有什么區(qū)別？進(jìn)銷存與erp軟件理解</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132974.html" title="進(jìn)銷存如何進(jìn)行庫存管理">進(jìn)銷存如何進(jìn)行庫存管理</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132269.html" title="excel銷售訂單管理系統(tǒng)（銷售訂單錄入系統(tǒng)）">如何利用excel制作銷售訂單管理系統(tǒng)？</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/136946.html" title="數(shù)據(jù)庫訂單管理系統(tǒng)有哪些功能？數(shù)據(jù)庫訂單管理系統(tǒng)怎么設(shè)計(jì)？">數(shù)據(jù)庫訂單管理系統(tǒng)有哪些功能？數(shù)據(jù)庫訂單管理系統(tǒng)怎么設(shè)計(jì)？</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/132312.html" title="數(shù)據(jù)庫訂單管理系統(tǒng)（訂單系統(tǒng)數(shù)據(jù)流圖）">什么是數(shù)據(jù)庫管理系統(tǒng)？</a></h4></li></ul></ul></div> </div> <div class="y0guewo" id="divPrevious" class="part clear previous"> <div id="ekie2e0" class="top"> <h3 class="title">最近發(fā)表</h3> </div> <div id="0ggqo00" class="side divPrevious"><ul><li><a title="寵物集市-寵物集市華東、華南、華北排行榜一覽表" href="http://m.bai1xia.com/news/post/157796.html">寵物集市-寵物集市華東、華南、華北排行榜一覽表</a></li> <li><a title="京寵展-2025年時(shí)間表" href="http://m.bai1xia.com/news/post/157795.html">京寵展-2025年時(shí)間表</a></li> <li><a title="寵物集市在深圳哪里有?時(shí)間地址最新消息" href="http://m.bai1xia.com/news/post/157794.html">寵物集市在深圳哪里有?時(shí)間地址最新消息</a></li> <li><a title="亞洲寵物展2025年展會(huì)介紹" href="http://m.bai1xia.com/news/post/157793.html">亞洲寵物展2025年展會(huì)介紹</a></li> <li><a title="京寵展信息指南" href="http://m.bai1xia.com/news/post/157792.html">京寵展信息指南</a></li> <li><a title="寵物展會(huì)2025年時(shí)間表" href="http://m.bai1xia.com/news/post/157791.html">寵物展會(huì)2025年時(shí)間表</a></li> <li><a title="亞寵展、全球?qū)櫸锂a(chǎn)業(yè)風(fēng)向標(biāo)——亞洲寵物展覽會(huì)深度解析" href="http://m.bai1xia.com/news/post/157790.html">亞寵展、全球?qū)櫸锂a(chǎn)業(yè)風(fēng)向標(biāo)——亞洲寵物展覽會(huì)深度解析</a></li> <li><a title="2025年亞洲寵物展覽會(huì)、京寵展有哪些亮點(diǎn)" href="http://m.bai1xia.com/news/post/157789.html">2025年亞洲寵物展覽會(huì)、京寵展有哪些亮點(diǎn)</a></li> <li><a title="<a target="_blank" href="http://m.bai1xia.com/news/tags-10262.html"style="font-weight:bold;">wps</a>演示添加自定義按鈕<a target="_blank" href="http://m.bai1xia.com/news/tags-823.html"style="font-weight:bold;">設(shè)置</a>動(dòng)作改變按順序播放" href="http://m.bai1xia.com/news/post/118206.html"><a target="_blank" href="http://m.bai1xia.com/news/tags-10262.html"style="font-weight:bold;">wps</a>演示添加自定義按鈕<a target="_blank" href="http://m.bai1xia.com/news/tags-823.html"style="font-weight:bold;">設(shè)置</a>動(dòng)作改變按順序播放</a></li> <li><a title="如何將<a target="_blank" href="http://m.bai1xia.com/news/tags-13007.html"style="font-weight:bold;">WPS</a>行中的文本調(diào)整到行中" href="http://m.bai1xia.com/news/post/119027.html">如何將<a target="_blank" href="http://m.bai1xia.com/news/tags-13007.html"style="font-weight:bold;">WPS</a>行中的文本調(diào)整到行中</a></li> </ul></div> </div> <div class="2yiiq02" id="sidebar_ad" class="part clear sidebar_ad"> <div id="as4scuk" class="part sidebar_ad"></div> </div> <div class="kcmm2ao" id="hot_posts" class="part clear hot_posts"> <div id="0qoq0gu" class="top"> <h3 class="title">熱評(píng)文章</h3> </div> <ul class="hot_posts"><li><h4><a href="http://m.bai1xia.com/news/post/104011.html" title="<a target="_blank" href="http://m.bai1xia.com/news/tags-10179.html"style="font-weight:bold;">零代碼</a>開發(fā)是什么？2022<a target="_blank" href="http://m.bai1xia.com/news/tags-1.html"style="font-weight:bold;">低代碼</a>平臺(tái)排行榜">零代碼開發(fā)是什么？2022低代碼平臺(tái)排行榜</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/131019.html" title="智能<a target="_blank" href="http://m.bai1xia.com/news/tags-14329.html"style="font-weight:bold;">進(jìn)銷存庫存管理</a><a target="_blank" href="http://m.bai1xia.com/news/tags-56.html"style="font-weight:bold;">系統(tǒng)</a>（智慧進(jìn)銷存）">智能進(jìn)銷存庫存管理系統(tǒng)（智慧進(jìn)銷存）</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/73907.html" title="<a target="_blank" href="http://m.bai1xia.com/news/tags-14095.html"style="font-weight:bold;">在線文檔</a>哪家強(qiáng)？8款在線文檔編輯軟件推薦">在線文檔哪家強(qiáng)？8款在線文檔編輯軟件推薦</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/102663.html" title="WPS2016怎么繪制簡單的價(jià)格表?">WPS2016怎么繪制簡單的價(jià)格表?</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/143685.html" title="定制家居數(shù)字化管理模式：提升品質(zhì)、智能化和個(gè)性化的未來">定制家居數(shù)字化管理模式：提升品質(zhì)、智能化和個(gè)性化的未</a></h4></li><li><h4><a href="http://m.bai1xia.com/news/post/144333.html" title="智能定制家居管理系統(tǒng)：重新定義家庭生活方式">智能定制家居管理系統(tǒng)：重新定義家庭生活方式</a></h4></li></ul> </div> <div class="gkuse0g" id="divLinkage" class="part clear link"> <div id="wqawekc" class="top"> <h3 class="title">友情鏈接</h3> </div> <div id="qeaw0sg" class="side divLinkage"><ul><li id="skkugwc" class="link-item"><a href="http://m.bai1xia.com/" target="_blank" title="伙伴云">伙伴云</a></li><li id="ekwucma" class="link-item"><a href="http://m.bai1xia.com/news/category-19.html" title="進(jìn)銷存管理">進(jìn)銷存管理</a></li><li id="gws00ui" class="link-item"><a href="http://m.bai1xia.com/news/category-3.html" title="低代碼">低代碼</a></li><li id="w0o0iou" class="link-item"><a href="http://m.bai1xia.com/news/tags-12.html" target="_blank" title="Excel表格">Excel表格</a></li><li id="m00ck0c" class="link-item"><a title="誠鼎網(wǎng)">誠鼎網(wǎng)</a></li><li id="mu2yk0o" class="link-item"><a title="FinClip">FinClip</a></li><li id="0y2k0uo" class="link-item"><a title="海特貝利常識(shí)網(wǎng)">海特貝利常識(shí)網(wǎng)</a></li></ul></div> </div> </div> </div> </section> </div> <footer class="p-footer"> <div id="u2cakou" class="contant_box"> <div id="yso0g0g" class="discover_tmt"> <h5 class="" style="font-size: 1px; color: white;">伙伴云</h5> <div id="0soyuko" class="text_box"> <a title="toB數(shù)字化營銷SEO" style="font-size: 1px; color: white;">加搜toBSEO</a> <a title="小程序工具" style="font-size: 1px; color: white;">前端框架</a> <a title="小紅書營銷攻略" style="font-size: 1px; color: white;">小紅書營銷攻略</a> <a title="衍因科技" style="font-size: 1px; color: white;">衍因科技</a> <a title="FinClip 技術(shù)文檔" style="font-size: 1px; color: white;">小程序容器幫助中心</a> <a title="小程序開發(fā)行業(yè)洞察" style="font-size: 1px; color: white;">小程序開發(fā)行業(yè)洞察</a> <a title="全面預(yù)算管理資訊" style="font-size: 1px; color: white;">全面預(yù)算管理資訊</a> <a title="企微SCRM客戶管理干貨" style="font-size: 1px; color: white;">企微SCRM客戶管理干貨</a> <a title="3D視覺相機(jī)資訊" style="font-size: 1px; color: white;">3D視覺相機(jī)資訊</a> <a title="創(chuàng)冷科技無電制冷" style="font-size: 1px; color: #22292D;">創(chuàng)冷科技無電制冷</a> <a title="協(xié)作機(jī)器人資訊" style="font-size: 1px; color: #22292D;">協(xié)作機(jī)器人資訊</a> </div> </div> <div id="c2ueo0o" class="collaboration_box"> </div> <div id="wok2gi0" class="we_img_box clear"> <div id="c2kgeim" class="img_box"> <img src="http://m.bai1xia.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt"> </div> </div> </div> <p class="info"> <a target="_blank" rel="nofollow">京ICP備12038259號(hào)</a> <span> <a href="#"></a></span> </p> </footer> <div class="ewus00i" id="backtop" class="backtop"> <div id="wo00ac0" class="bt-box top"> <i class="fa fa-angle-up fa-2x"></i> </div> </div> <script charset="UTF-8" src="http://m.bai1xia.com/assets/js/sensorsdata.1.22.2.min.js"></script> <script charset="UTF-8"> var sensors = window['sensorsDataAnalytic201505']; sensors.init({ server_url: 'https://saapi.huoban.com/sa?project=production', heatmap:{scroll_notice_map:'not_collect'}, use_client_time:true, send_type:'beacon' }); sensors.quick('autoTrack'); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6444c045836d6bf27124085a4f62c2a8"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="9fe06d4884e0461caaa1de5651164d43";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})(); </script><script language="javascript" src="http://m.bai1xia.com/news/zb_users/plugin/ZF_ad/js/index.js?id=166"></script> <script language="javascript" src="http://m.bai1xia.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://m.bai1xia.com/" title="日本亚洲中午字幕乱码">日本亚洲中午字幕乱码</a> <div class="friend-links"> </div> </div> </footer> <a href="http://" target="_blank">亚洲精品色在线网站</a>| <a href="http://" target="_blank">久久亚洲精品AB无码播放</a>| <a href="http://" target="_blank">亚洲精品美女久久久久99</a>| <a href="http://" target="_blank">色窝窝亚洲av网</a>| <a href="http://" target="_blank">亚洲hairy多毛pics大全</a>| <a href="http://" target="_blank">中文字幕精品三区无码亚洲</a>| <a href="http://" target="_blank">亚洲人成网站18禁止久久影院</a>| <a href="http://" target="_blank">久久精品国产亚洲av麻豆</a>| <a href="http://" target="_blank">久久亚洲AV无码西西人体</a>| <a href="http://" target="_blank">亚洲国产高清在线一区二区三区</a>| <a href="http://" target="_blank">亚洲熟妇av午夜无码不卡</a>| <a href="http://" target="_blank">亚洲最大无码中文字幕</a>| <a href="http://" target="_blank">亚洲欧洲日韩极速播放</a>| <a href="http://" target="_blank">亚洲精品无码成人</a>| <a href="http://" target="_blank">亚洲欧美成人综合久久久</a>| <a href="http://" target="_blank">亚洲一区二区无码偷拍</a>| <a href="http://" target="_blank">亚洲乱妇熟女爽到高潮的片</a>| <a href="http://" target="_blank">亚洲一本到无码av中文字幕</a>| <a href="http://" target="_blank">亚洲中文字幕久久精品无码VA</a>| <a href="http://" target="_blank">亚洲午夜一区二区三区</a>| <a href="http://" target="_blank">亚洲日产乱码一二三区别</a>| <a href="http://" target="_blank">亚洲综合国产成人丁香五月激情</a>| <a href="http://" target="_blank">久久亚洲国产成人影院</a>| <a href="http://" target="_blank">亚洲午夜福利在线视频</a>| <a href="http://" target="_blank">亚洲人成网站免费播放</a>| <a href="http://" target="_blank">亚洲AV女人18毛片水真多</a>| <a href="http://" target="_blank">成人亚洲国产精品久久</a>| <a href="http://" target="_blank">亚洲女人被黑人巨大进入</a>| <a href="http://" target="_blank">亚洲国产成人VA在线观看</a>| <a href="http://" target="_blank">亚洲精品无码久久久久AV麻豆</a>| <a href="http://" target="_blank">亚洲欧洲中文日韩av乱码</a>| <a href="http://" target="_blank">国产亚洲精品a在线观看</a>| <a href="http://" target="_blank">亚洲人成图片小说网站</a>| <a href="http://" target="_blank">亚洲高清国产AV拍精品青青草原</a>| <a href="http://" target="_blank">久热综合在线亚洲精品</a>| <a href="http://" target="_blank">亚洲AV无码精品无码麻豆</a>| <a href="http://" target="_blank">久久亚洲春色中文字幕久久久</a>| <a href="http://" target="_blank">亚洲日产2021三区</a>| <a href="http://" target="_blank">亚洲日本天堂在线</a>| <a href="http://" target="_blank">亚洲JIZZJIZZ中国少妇中文</a>| <a href="http://" target="_blank">国产日产亚洲系列</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="8owkg" class="pl_css_ganrao" style="display: none;"><kbd id="8owkg"></kbd><source id="8owkg"></source><tbody id="8owkg"></tbody><abbr id="8owkg"><pre id="8owkg"><center id="8owkg"></center></pre></abbr><optgroup id="8owkg"></optgroup><fieldset id="8owkg"></fieldset><fieldset id="8owkg"></fieldset><tr id="8owkg"><s id="8owkg"><bdo id="8owkg"></bdo></s></tr><dfn id="8owkg"></dfn><wbr id="8owkg"><cite id="8owkg"><menu id="8owkg"></menu></cite></wbr><cite id="8owkg"><menu id="8owkg"><li id="8owkg"></li></menu></cite><optgroup id="8owkg"></optgroup><dfn id="8owkg"></dfn><object id="8owkg"></object><center id="8owkg"><tfoot id="8owkg"><input id="8owkg"></input></tfoot></center><rt id="8owkg"></rt><tbody id="8owkg"></tbody><strike id="8owkg"><menu id="8owkg"><li id="8owkg"></li></menu></strike><nav id="8owkg"></nav><rt id="8owkg"></rt><bdo id="8owkg"><table id="8owkg"><tr id="8owkg"></tr></table></bdo><abbr id="8owkg"></abbr><samp id="8owkg"></samp><s id="8owkg"><bdo id="8owkg"><em id="8owkg"></em></bdo></s><code id="8owkg"><em id="8owkg"><del id="8owkg"></del></em></code><dfn id="8owkg"></dfn><center id="8owkg"><dd id="8owkg"><th id="8owkg"></th></dd></center><s id="8owkg"></s><table id="8owkg"></table><dd id="8owkg"></dd><ul id="8owkg"></ul><noscript id="8owkg"></noscript><s id="8owkg"><bdo id="8owkg"><em id="8owkg"></em></bdo></s><dl id="8owkg"><input id="8owkg"><abbr id="8owkg"></abbr></input></dl><ul id="8owkg"></ul><tr id="8owkg"></tr><ul id="8owkg"></ul><del id="8owkg"><dfn id="8owkg"><td id="8owkg"></td></dfn></del><delect id="8owkg"></delect><ul id="8owkg"></ul><code id="8owkg"></code><dfn id="8owkg"></dfn><tr id="8owkg"></tr><em id="8owkg"><delect id="8owkg"><dfn id="8owkg"></dfn></delect></em><center id="8owkg"><fieldset id="8owkg"><input id="8owkg"></input></fieldset></center><bdo id="8owkg"></bdo><pre id="8owkg"></pre><tr id="8owkg"><s id="8owkg"><bdo id="8owkg"></bdo></s></tr><option id="8owkg"></option><dl id="8owkg"></dl><fieldset id="8owkg"></fieldset><pre id="8owkg"><center id="8owkg"><dl id="8owkg"></dl></center></pre><rt id="8owkg"></rt><pre id="8owkg"></pre><tbody id="8owkg"><wbr id="8owkg"><strong id="8owkg"></strong></wbr></tbody><option id="8owkg"></option><del id="8owkg"><sup id="8owkg"><td id="8owkg"></td></sup></del><ul id="8owkg"></ul><tbody id="8owkg"></tbody><samp id="8owkg"></samp><dfn id="8owkg"></dfn><tbody id="8owkg"></tbody><tr id="8owkg"><s id="8owkg"><bdo id="8owkg"></bdo></s></tr><dfn id="8owkg"></dfn><cite id="8owkg"><abbr id="8owkg"><kbd id="8owkg"></kbd></abbr></cite><source id="8owkg"></source><noscript id="8owkg"></noscript><source id="8owkg"></source><center id="8owkg"><xmp id="8owkg"><th id="8owkg"></th></xmp></center><tr id="8owkg"></tr><blockquote id="8owkg"></blockquote><strong id="8owkg"></strong><td id="8owkg"><fieldset id="8owkg"><table id="8owkg"></table></fieldset></td><del id="8owkg"></del><blockquote id="8owkg"><tbody id="8owkg"><object id="8owkg"></object></tbody></blockquote><tbody id="8owkg"><button id="8owkg"><samp id="8owkg"></samp></button></tbody><kbd id="8owkg"></kbd><dfn id="8owkg"></dfn><rt id="8owkg"></rt><bdo id="8owkg"></bdo><small id="8owkg"></small><em id="8owkg"><delect id="8owkg"><tr id="8owkg"></tr></delect></em><option id="8owkg"></option><optgroup id="8owkg"></optgroup><tbody id="8owkg"><noframes id="8owkg"><samp id="8owkg"></samp></noframes></tbody><delect id="8owkg"><tr id="8owkg"><rt id="8owkg"></rt></tr></delect><sup id="8owkg"><center id="8owkg"><table id="8owkg"></table></center></sup><blockquote id="8owkg"></blockquote><tr id="8owkg"><s id="8owkg"><bdo id="8owkg"></bdo></s></tr><input id="8owkg"></input><button id="8owkg"><samp id="8owkg"><tbody id="8owkg"></tbody></samp></button><object id="8owkg"><tbody id="8owkg"><button id="8owkg"></button></tbody></object><fieldset id="8owkg"></fieldset><pre id="8owkg"></pre><source id="8owkg"></source><strike id="8owkg"><nav id="8owkg"><li id="8owkg"></li></nav></strike><nav id="8owkg"></nav><sup id="8owkg"></sup><menu id="8owkg"></menu><tr id="8owkg"></tr><cite id="8owkg"></cite><ul id="8owkg"></ul><rt id="8owkg"></rt><table id="8owkg"></table><ul id="8owkg"></ul><samp id="8owkg"><tfoot id="8owkg"><object id="8owkg"></object></tfoot></samp><noframes id="8owkg"><ul id="8owkg"><pre id="8owkg"></pre></ul></noframes><delect id="8owkg"><strike id="8owkg"><s id="8owkg"></s></strike></delect><li id="8owkg"><option id="8owkg"><dd id="8owkg"></dd></option></li><td id="8owkg"></td><xmp id="8owkg"></xmp><table id="8owkg"><tr id="8owkg"><sup id="8owkg"></sup></tr></table><kbd id="8owkg"></kbd><abbr id="8owkg"></abbr><pre id="8owkg"></pre><tr id="8owkg"></tr><s id="8owkg"><bdo id="8owkg"><em id="8owkg"></em></bdo></s><td id="8owkg"><code id="8owkg"><table id="8owkg"></table></code></td><td id="8owkg"><fieldset id="8owkg"><optgroup id="8owkg"></optgroup></fieldset></td><tfoot id="8owkg"><source id="8owkg"><small id="8owkg"></small></source></tfoot><dd id="8owkg"><cite id="8owkg"><nav id="8owkg"></nav></cite></dd><center id="8owkg"><dd id="8owkg"><cite id="8owkg"></cite></dd></center><ul id="8owkg"></ul><kbd id="8owkg"></kbd><dd id="8owkg"></dd><center id="8owkg"><dd id="8owkg"><cite id="8owkg"></cite></dd></center><pre id="8owkg"></pre><dd id="8owkg"><strong id="8owkg"><abbr id="8owkg"></abbr></strong></dd><ul id="8owkg"><center id="8owkg"><wbr id="8owkg"></wbr></center></ul><xmp id="8owkg"></xmp><blockquote id="8owkg"></blockquote><kbd id="8owkg"></kbd><noscript id="8owkg"><center id="8owkg"><dd id="8owkg"></dd></center></noscript><noscript id="8owkg"><option id="8owkg"><delect id="8owkg"></delect></option></noscript><tr id="8owkg"></tr><xmp id="8owkg"></xmp><acronym id="8owkg"></acronym><button id="8owkg"></button><strike id="8owkg"></strike><delect id="8owkg"></delect><object id="8owkg"><strong id="8owkg"><noframes id="8owkg"></noframes></strong></object><noframes id="8owkg"><ul id="8owkg"><pre id="8owkg"></pre></ul></noframes><tbody id="8owkg"></tbody><button id="8owkg"></button><source id="8owkg"></source><tbody id="8owkg"><button id="8owkg"><samp id="8owkg"></samp></button></tbody><button id="8owkg"></button><tbody id="8owkg"><source id="8owkg"><strong id="8owkg"></strong></source></tbody><s id="8owkg"></s><kbd id="8owkg"></kbd></div> </html>