提姆寫程式

0%

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

發表於 更新於 分類於 Disqus：
使用 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>

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