0%

Vue 筆記 - 使用 is 動態切換元件

vue.js

有些頁面可以使用按鈕或頁籤來實現切換元件的功能,如果用原生的 JS 來撰寫,會有非常多的程式碼,透過 Vue 的 is,就透過簡易編寫的方式輕鬆切換元件來達到效果。

is 的基礎應用

下方有一個資訊卡片,原程式碼如下:

HTML

1
<primary-component :data="item"></primary-component>

局部元件

1
2
3
4
5
6
7
8
9
<script type="text/x-template" id="primaryComponent">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">{{ data.header }}</div>
<div class="card-body">
<h5 class="card-title">{{ data.title }}</h5>
<p class="card-text">{{ data.text }}</p>
</div>
</div>
</script>

Vue 對應的元件與物件實體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Vue.component("primary-component", {
props: ["data"],
template: "#primaryComponent",
});

var app = new Vue({
el: "#app",
data: {
item: {
header: "這裡是 header",
title: "這裡是 title",
text:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim perferendis illo reprehenderit ex natus earum explicabo modi voluptas cupiditate aperiam, quasi quisquam mollitia velit ut odio vitae atque incidunt minus?",
},
current: "primary-component", //主要使用的屬性
},
});

只要在 HTML 標籤的局部物件中加上 is="current" 這個屬性資料,就可以靜態完成新增此元件的功能,很簡單吧!

1
2
<primary-component :data="item"></primary-component>
<div is="primary-component" :data="item"></div>

動態切換元件

前面已經基礎知道靜態頁面要如何撰寫,之前許多筆記有注意到動態綁定屬性要用 v-bind

下方有兩個按鈕,透過切換按鈕直接做元件的背景色切換。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<h2 class="mt-3">使用 is 動態切換組件</h2>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" :class="{'active': current == 'primary-component'}" href="#" @click.prevent="current = 'primary-component'">藍色元件</a>
</li>
<li class="nav-item">
<a class="nav-link" :class="{'active': current == 'danger-component'}" href="#" @click.prevent="current = 'danger-component'">紅色元件</a>
</li>
</ul>
<div class="mt-3">
<primary-component :data="item" v-if="current === 'primary-component'"></primary-component>
<danger-component :data="item" v-if="current === 'danger-component'"></danger-component>
</div>

局部元件

沒有太特別的設定,只是背景換顏色而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/x-template" id="primaryComponent">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">{{ data.header }}</div>
<div class="card-body">
<h5 class="card-title">{{ data.title }}</h5>
<p class="card-text">{{ data.text }}</p>
</div>
</div>
</script>

<script type="text/x-template" id="dangerComponent">
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">{{ data.header }}</div>
<div class="card-body">
<h5 class="card-title">{{ data.title }}</h5>
<p class="card-text">{{ data.text }}</p>
</div>
</div>
</script>

Vue 局部元件資料與實體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Vue.component("primary-component", {
props: ["data"],
template: "#primaryComponent",
});
Vue.component("danger-component", {
props: ["data"],
template: "#dangerComponent",
});

var app = new Vue({
el: "#app",
data: {
item: {
header: "這裡是 header",
title: "這裡是 title",
text:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim perferendis illo reprehenderit ex natus earum explicabo modi voluptas cupiditate aperiam, quasi quisquam mollitia velit ut odio vitae atque incidunt minus?",
},
current: "primary-component",
},
});

改寫 HTML

在動態切換元件有看到 ul 清單列表內有兩個 a 連結,其中有綁定 click 事件,當點擊時,透過 v-bind:class 新增 active 屬性,並切換背景色。

1
2
3
4
5
6
7
8
<primary-component
:data="item"
v-if="current === 'primary-component'"
></primary-component>
<danger-component
:data="item"
v-if="current === 'danger-component'"
></danger-component>

依照剛剛靜態的概念,透過動態切換,所以可改寫成下方程式碼,

1
<div :is="current" :data="item"></div>

這樣就完成了點擊按鈕並可切換背景色。