按鈕切換元件

2022-07-26 12:45:13 字數 881 閱讀 3012

本**只是供自己學習使用,如有錯誤,希望批評指出!

布局分布:

<

div

id="offno"

>

<

input

type

="checkbox"

id="fd"

class

="fd"

/>

<

label

for="fd"

class

="toggle"

><

span

class

="toggle_header"

>

span

>

label

>

div>

樣式:

body

/*將雙選框隱藏掉*/

input

/*不設寬高,讓元素自動填充,定位垂直居中*/

#offno

/*label行內元素不能設定寬高,顯示為行內塊元素*/

.toggle

.toggle:before,.toggle:after

.toggle:before

.toggle:after

/*滑動背景*/

.toggle_header

/*選擇滑動60px*/

input:checked +.toggle .toggle_header

/*滑動背景變色*/

input:checked +.toggle

input:checked +.toggle:before

input:checked +.toggle:after

style

>

vue router切換,元件不銷毀

需求 後台管理系統,切換選單時需要一部分頁面重新整理,一部分不重新整理 其實就是元件銷毀問題 首先,我們需要在router view標籤外再包上一層標籤keep alive route.meta.keepalive router view keep alive route.meta.keepaliv...

vue之Tab切換元件

如下 示例 如下 示例 頭部切換 tab tilte v for item,index in tablist key index click toggletab index li ul 內容元件 11201939.html 如下 示例 頭部切換 for item,index in tablable ...

路由切換元件不重新整理

vue 解決路由切換,頁面不更新的實用方法 汪小穆 2018 09 22 17 27 09 31639 收藏 34 展開前言 vue router的切換不同於傳統的頁面的切換。路由之間的切換,其實就是元件之間的切換,不是真正的頁面切換。這也會導致乙個問題,就是引用相同元件的時候,會導致該元件無法更新...