使用 Vue 加載外部樣式，可以輕松實現根據不同的數據狀態來動態改變頁面樣式的效果。以下是加載外部樣式的詳細步驟。

首先，在 Vue 的頁面模板中添加需要使用的外部樣式鏈接：

<template>
<div>
<link rel="stylesheet" href="./styles.css">
<!-- 頁面內容 -->
</div>
</template>

這里的“./styles.css”就是需要加載的外部樣式表文件名。可以根據實際需要修改為其他文件名及路徑。

接下來，在 Vue 的腳本部分中，使用 import 引入需要的樣式表：

<script>
import './styles.css'
export default {
// 組件選項
}
</script>

這里的“./styles.css”與頁面模板中引入的樣式表文件名一致。可以根據實際需要修改為其他文件名及路徑。

在使用了這種方式加載外部樣式后，就可以在 Vue 組件中直接使用樣式表中定義的樣式名了。比如：

<template>
<div>
<!-- 使用樣式表中定義的 .bg-red 樣式名 -->
<div class="bg-red">Some Content</div>
</div>
</template>

當然，在沒有引入外部樣式表時，也可以在 Vue 組件中直接定義樣式。比如：

<template>
<div>
<!-- 直接定義 .bg-red 樣式 -->
<style>
.bg-red {
background-color: red;
}
</style>
<div class="bg-red">Some Content</div>
</div>
</template>

這種方式和引入外部樣式表的方式相比，代碼量會更大一些，可讀性也會更低。但在一些小型項目中，可以方便快捷地實現樣式效果。

最后提醒一點，在使用了引入外部樣式表的方式后，要注意確保樣式表文件可以正確地被加載。當樣式表文件路徑錯誤或文件內容錯誤時，會導致頁面樣式失效，出現“白屏”等不良效果。