Vue 模板看起来非常接近 HTML。
最常用的几种模板能力：
- 插值：
{{ ... }} - 绑定属性：
:src="..."、:class="..." - 事件监听：
@click="..." - 条件渲染：
v-if - 列表渲染：
v-for - 表单绑定：
v-model
<script setup lang="ts">
const shops = [
{ id: 1, name: 'Vue 书店', open: true },
{ id: 2, name: 'Pinia 咖啡馆', open: false },
];
</script>
<template>
<ul>
<li v-for="shop in shops" :key="shop.id">
<span>{{ shop.name }}</span>
<strong v-if="shop.open">营业中</strong>
<em v-else>休息中</em>
</li>
</ul>
</template>