Vue 是一個現代化的前端框架，它具有很多強大的功能，其中包括循環顯示 HTML。我們可以使用 Vue 的 v-for 指令來實現這個功能。v-for 指令允許我們在頁面上循環渲染一組數據，這非常適用于需要頻繁操作一個數據集合的場景。

<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: ["Vue", "React", "Angular", "Ember"]
};
}
};
</script>

在上面的代碼中，我們使用 v-for 指令來循環遍歷列表數據，對于每個數據項，我們都會渲染一個 <li> 元素，并把當前項的值綁定到模板中。在模板中我們使用 {{ item }} 的方式來輸出當前項的值。

除了數組之外，我們還可以使用 v-for 指令渲染對象中的屬性。下面是一個示例：

<template>
<div>
<ul>
<li v-for="(value, name) in user" :key="name">
{{ name }}: {{ value }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: "Tom",
age: 18,
gender: "Male"
}
};
}
};
</script>

在這個例子里面，我們將一個對象作為數據源，使用 v-for 指令遍歷對象的屬性，對于每個屬性，我們都會渲染一個 <li> 元素，并把屬性名和屬性值綁定到模板中。

v-for 指令還可以使用一個特殊的語法形式來指定一個整數范圍，從而渲染一個計數器序列。下面是一個示例：

<template>
<div>
<ul>
<li v-for="n in 10" :key="n">
{{ n }}
</li>
</ul>
</div>
</template>

在這個例子里面，我們使用 v-for 指令來遍歷一個整數范圍（從 1 到 10），對于每個整數，我們都會渲染一個 <li> 元素，并把當前整數值綁定到模板中。

除了上述示例中的用法之外，v-for 指令還有更多的用法。我們可以使用 v-for 指令的迭代器中的值來處理條件渲染、樣式綁定、事件綁定等場景。具體使用方法可以參考 Vue 官方文檔。