模板语法渲染

写博客项目第一步，是学会把数据"渲染"到页面上。Vue3 的模板语法让 HTML 直接与数据绑定：插值表达式、v-text/v-html、v-bind、v-for、v-if 是最常用的几种，本节结合文章列表逐一演示。

插值表达式 {{ }}

双大括号把变量的值输出到标签内容中：

<template>
  <h1>{{ siteName }}</h1>
  <p>共 {{ posts.length }} 篇文章</p>
</template>

<script setup>
import { ref } from 'vue'
import { posts } from '../data/posts'

const siteName = ref('我的技术博客')
</script>

效果：页面显示"我的技术博客"与"共 2 篇文章"。插值里可以写简单表达式，如 posts.length。

v-text 与 v-html

v-text 等价于插值（输出纯文本）；v-html 则把内容当作 HTML 解析渲染，适合文章正文这类带标签的数据：

<template>
  <div v-text="post.summary"></div>   <!-- 纯文本 -->
  <div v-html="post.content"></div>   <!-- 解析 HTML -->
</template>

注意：v-html 有 XSS 风险，只对可信内容（如自己维护的正文）使用，不要直接渲染用户输入。

v-bind 动态绑定属性

属性（href、class、src 等）不能用插值，要用 v-bind（简写 :）。为每篇文章生成跳转链接：

<template>
  <a :href="'/post/' + post.id">阅读全文 →</a>
  <span v-if="post.hot" class="badge">热门</span>
</template>

效果：文章 id 为 2 时链接渲染成 /post/2；post.hot 为真时才显示"热门"徽标。

v-for 渲染文章列表

遍历数组重复生成节点，记得写 key 以便复用：

<template>
  <article v-for="post in posts" :key="post.id">
    <h2>{{ post.title }}</h2>
    <p>{{ post.summary }}</p>
    <span v-for="tag in post.tags" :key="tag">#{{ tag }} </span>
  </article>
</template>

效果：有几篇文章就渲染几张卡片，标签用内层 v-for 逐个输出为 #Vue3 #Pinia。

v-if / v-else 处理空状态

列表为空时给用户友好提示，比白屏强得多：

<template>
  <p v-if="posts.length === 0">还没有文章，敬请期待～</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

效果：数据为空时显示提示文案；有数据时显示列表，二者互斥出现。

小结

插值、v-text/v-html、v-bind、v-for、v-if 是模板渲染的常用指令，文章列表页已经能"长"出来了。下一节把卡片抽成 PostCard 组件，让页面结构更清晰。