Vue之元件切換

先看效果：

兩種方法：

1、使用v-show來實現元件切換

"flag=!flag"

>
}<
/button>
"list" v-show=
"flag"
>
<
/showtable>
"list" v-show=
"!flag"
>
<
/showlist>
//利用v-show的顯示隱藏來實現列表和**之間的切換
//列表和**的模板定義
"showtable"
>
編號<
/td>
姓名<
/td>
年齡<
/td>
性別<
/td>
<
/tr>
for=
"(item,index) in list"
:key=
"index"
>
}<
/td>
}<
/td>
}<
/td>
}<
/td>
<
/tr>
<
/table>
<
/template>
"showlist"
>
for=
"(item,index) in list"
:key=
"index"
>
}<
/p>
for=
"(items,value,i) in item"
:key=
"i">
}<
/p>
<
/li>
<
/ul>
<
/template>2、利用component來實現足間切換
"currentcpt"
>
"showtable"
>**<
/option>
"showlist"
>列表<
/option>
<
/select>
<
!-- 失活的元件將會被快取！ 下一次失活元件重新啟用的時候 會直接呼叫快取 效能優化 --
>
"currentcpt"
:list=
"list"
>
<
/component>
<
/keep-alive>
vue.
component
("showtable",}
) vue.
component
("showlist",}
)const vm =
newvue(,
,,,]
, flag:
true
, currentcpt:
"showtable"},
mounted()
})<
/script>

vue之Tab切換元件

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

用iview標籤切換vue路由元件

iview中有效果不錯的標籤元件,於是就有了把iview中的標籤,作為vue路由鏈結的做法 最開始,打算把router link的tag指定為iview的tag.結果發現這是不可行的,於是改變思路,最終實現 如下 switchtab value all on tab remove tabremove...

Vue教程10 元件 切換

登入a href click.prevent flag false 註冊a v if flag login v else register div 建立登入的元件 vue.component login 建立註冊的元件 vue.component register var vm newvue met...