Vue.js是一款流行的前端框架，可以讓開發者輕松創建交互式的單頁Web應用程序。其中一個最重要的特性是其支持class和if指令，讓我們來看看如何使用這兩個指令來創建動態的頁面。

首先，我們來看看class指令。使用class指令，可以根據數據的狀態動態的更改元素的class名稱。例如，當一個元素的status屬性為true時，我們可以將其class名稱更改為“active”，反之則更改為“inactive”。以下是一個簡單的例子：

<div v-bind:class="{ active: status, inactive: !status }">
<p>這是一段動態的文本。</p>
</div>

在上面的代碼中，我們使用了v-bind:class指令來綁定class名稱。其中“{ active: status, inactive: !status }”表示當status為true時使用“active”class名稱，反之則使用“inactive”class名稱。因此，根據status屬性的不同，元素的class名稱會自動切換。

接下來，我們來看看if指令。使用if指令，可以根據數據的狀態動態的決定是否渲染某個元素。例如，當一個元素的isVisible屬性為true時，我們可以將其渲染到頁面上，反之則隱藏它。以下是一個簡單的例子：

<div v-if="isVisible">
<p>這是一段動態的文本。</p>
</div>

在上面的代碼中，我們使用了v-if指令來判斷是否渲染元素。其中“isVisible”表示可以動態改變的數據狀態。因此，根據isVisible屬性的不同，元素的渲染狀態會自動切換。