JK 研習營

Vue3 101-4

Mr. JK's photo
Mr. JK
·

2 min read

在上一個單元，已經學習到如何宣告變數與顯示出來。從這個單元開始，會接觸各種程式邏輯判斷的方法，首先先來看看什麼是 if 判斷。

一樣跟上一個單元一樣，宣告一個變數 isShow，但這裡的變數的型別是使用布林型別，只有 true 與 false 兩種值，我將其設定為 true：

<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

接下來使用 if 判斷式來判斷這個變數 isShow 是不是等於 true，如果等於 true 的話才會顯示內容，否則的話就不顯示。在 Vue3 使用 if 判斷式是使用 v-if 這個關鍵字：

<p v-if="isShow">Hello World</p>

所以將程式碼結合起來：

<template>
  <p v-if="isShow">Hello World</p>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

在 data(){} 內宣告了一個布林變數為 isShow，在 template 之中使用 Vue3 標籤 v-if 並且指定變數為 isShow，就可以使用 isShow 這個變數來控制是否顯示 Hello World 這樣的內容。

可以把 isShow 修改為 false，然後看看 Hello World 是不是還會顯示。

if 判斷式也可以加入 else 的判斷語法，v-if 跟 v-else-if。先宣告一個變數 x 等於 2：

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 2,
    };
  },
};
</script>

然後加入 v-if 與 v-else-if 判斷：

<template>
  <p v-if="x === 0">x = 0</p>
  <p v-else-if="x === 1">x = 1</p>
  <p v-else-if="x === 2">x = 2</p>
  <p v-else>x != 0</p>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      x: 2,
    };
  },
};
</script>

這個多重的 if else 結構是指，如果 x 等於 0 的話就顯示 x = 0，否則 x 等於 1 的話就顯示 x = 1，否則 x 等於 2 的話就顯示 x = 2，如果都不等於 0 且也不等於 1 且也不等於 2 的話就顯示 x != 0 。

最後， v-show 跟 v-if 會有一樣的效果，將 v-if 改成 v-show：

<template>
  <p v-show="isShow">Hello World</p>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

v-show 與 v-if 的差別在於， 如果 v-show 不顯示的話，會在 html 上顯示：

 <p style="display: none;">Hello World</p>

而 v-if 不顯示的話，會變成連 html 標籤都會消失不見。

Vue3 101-4 [完]

Vue3