以下是一些 Vue 3 模板语法的基本用法：
1. 数据绑定
使用 Mustache 语法 {{ ... }} 进行数据绑定，将数据渲染到页面中。
<div>{{ message }}</div>
2. 表达式
在模板中可以使用 JavaScript 表达式，进行一些简单的计算和逻辑操作。
<div>{{ message.toUpperCase() }}</div>
<div>{{ isTrue ? 'Yes' : 'No' }}</div>
3. 指令
Vue 3 模板语法支持一些内置指令，用于控制元素的行为。例如，v-bind 用于动态绑定属性，v-for 用于循环渲染。
<!-- 动态绑定 class 属性 -->
<div v-bind:class="{ active: isActive }">This is dynamic class</div>
<!-- 循环渲染数组 -->
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
4. 条件渲染
使用 v-if、v-else-if 和 v-else 进行条件渲染。
<div v-if="isTrue">This is true</div>
<div v-else-if="isFalse">This is false</div>
<div v-else>This is neither true nor false</div>
5. 事件处理
使用 v-on 监听 DOM 事件，执行相应的方法。
<button v-on:click="handleClick">Click me</button>
6. 双向绑定
使用 v-model 在表单元素上创建双向数据绑定。
<input v-model="message">
7. 属性绑定
使用 v-bind 进行属性绑定，可以动态设置元素的属性。
<a v-bind:href="url">Visit my website</a>
8. 片段和注释
使用 template 元素可以包裹多个元素，组成一个模板片段。
<template>
<div>First element</div>
<div>Second element</div>
</template>
<!-- 注释 -->
<!-- This is a comment -->
这只是 Vue 3 模板语法的一小部分。Vue 3 还提供了许多其他特性，包括插槽、自定义指令等。详细的信息可以查阅[官方文档](https://v3.vuejs.org/guide/introduction.html#declarative-rendering)。Vue 的模板语法旨在使开发者更容易理解和编写前端代码，提高开发效率。
转载请注明出处：http://www.zyzy.cn/article/detail/12976/Vue3