Vue 3 中使用 `<script setup>` 语法糖实现模板插值表达式

server/2024/11/19 21:32:59/
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

Vue 3 中使用 <script setup> 语法糖实现模板插值表达式

Vue 3 中的 <script setup> 语法糖让我们可以更直接地定义响应式数据和计算属性,从而在模板中使用插值表达式更加简洁。这种写法不需要手动 return 数据和方法,代码更加清晰。本文将详细介绍如何通过 <script setup> 语法糖实现插值表达式的各种用法。


一、什么是 <script setup>

<script setup> 是 Vue 3 中一种新的 <script> 标签形式,用来更简洁地编写组件的逻辑。通过 <script setup>,Vue 可以自动解析并暴露我们定义的变量、方法、计算属性等,使它们可以直接在模板中使用。

优势:

  • 更少的模板代码:无需手动 return 数据和方法。
  • 更清晰的逻辑:将数据和操作集中在一起,避免重复。
  • 编译性能提升:Vue 在编译时会优化 <script setup> 的代码,使渲染更加高效。

二、插值表达式的基本用法

1. 文本插值

插值表达式最基本的用法是展示文本信息。在 <script setup> 中使用 ref 定义响应式数据,然后在模板中使用 {{ }} 包裹变量即可展示文本。

示例:
<template><p>{{ message }}</p>
</template><script setup>
import { ref } from 'vue';const message = ref("Hello Vue 3 with script setup!");
</script>

在这里,我们使用 ref 创建了一个响应式变量 message,然后通过 {{ message }} 在模板中展示其值。如果 message 的值发生变化,Vue 会自动更新页面显示的内容。


2. JavaScript 表达式插值

插值表达式支持在 {{ }} 中直接使用 JavaScript 表达式,包括计算、三元运算符、字符串拼接等。

示例:
<template><p>{{ userName + ",欢迎回来!" }}</p><p>年龄:{{ age > 18 ? "成年" : "未成年" }}</p>
</template><script setup>
import { ref } from 'vue';const userName = ref("小明");
const age = ref(20);
</script>

在这个例子中,我们在 {{ }} 中直接使用了字符串拼接和三元运算符,使页面根据 userNameage 的值动态展示欢迎语句和年龄状态。


三、属性绑定(属性插值)

除了文本内容,插值表达式还可以用于 HTML 属性的动态绑定。通过 : 语法(或 v-bind),我们可以将数据绑定到 HTML 元素的属性上。

示例:

<template><img :src="imageUrl" alt="动态图片" /><a :href="websiteUrl">访问我的网站</a>
</template><script setup>
import { ref } from 'vue';const imageUrl = ref("https://example.com/image.jpg");
const websiteUrl = ref("https://example.com");
</script>

在这个示例中,:src="imageUrl" 会将 imageUrl 的值绑定到 <img> 元素的 src 属性。数据改变时,页面的图片也会自动更新。

组合绑定示例

在属性绑定中,我们还可以使用复杂的表达式来动态决定属性值,例如使用三元运算符来动态设置 CSS 类:

<template><button :class="isActive ? 'btn-active' : 'btn-inactive'">点击我</button>
</template><script setup>
import { ref } from 'vue';const isActive = ref(false);
</script>

isActivetrue 时,按钮的类名为 btn-active,否则为 btn-inactive。通过控制 isActive 的值,可以动态地改变按钮的样式。


四、计算属性与插值表达式

<script setup> 中,我们可以通过 computed 定义计算属性。计算属性会自动根据依赖的数据变化而重新计算,非常适合复杂的插值表达式需求。

示例:

<template><p>欢迎,{{ fullName }}</p>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref("张");
const lastName = ref("三");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

在这里,fullName 是一个计算属性,依赖于 firstNamelastName 的值。如果其中一个值发生变化,fullName 会自动更新并在视图中反映出来。


五、双向绑定与插值结合

Vue 3 支持通过 v-model 指令实现数据的双向绑定,常用于输入框和其他表单控件。我们可以结合插值表达式实现双向绑定的动态显示。

示例:

<template><input v-model="userInput" placeholder="请输入您的姓名" /><p>您输入的是:{{ userInput }}</p>
</template><script setup>
import { ref } from 'vue';const userInput = ref("");
</script>

在这个例子中,v-model="userInput" 实现了双向绑定。当用户在输入框中输入文字时,userInput 的值会实时更新,模板中的插值表达式 {{ userInput }} 也会相应变化。


六、方法定义和插值调用

<script setup> 中定义方法时,直接在模板中调用方法来展示动态数据或执行某些逻辑。

示例:

<template><p>当前时间:{{ getCurrentTime() }}</p><button @click="updateTime">刷新时间</button>
</template><script setup>
import { ref } from 'vue';const currentTime = ref(new Date().toLocaleTimeString());function getCurrentTime() {return currentTime.value;
}function updateTime() {currentTime.value = new Date().toLocaleTimeString();
}
</script>

在这个示例中,getCurrentTime() 函数返回当前时间字符串,而 updateTime() 则会在按钮点击时更新 currentTime,从而刷新页面显示的时间。


七、注意事项

  1. 避免复杂逻辑:在插值表达式中不要放置过于复杂的逻辑。如果需要,可以定义计算属性或方法来处理。
  2. 合理使用 refcomputed:使用 ref 来管理简单数据,使用 computed 处理依赖关系的值,使代码更加模块化。
  3. <script setup> 中避免 return<script setup> 会自动暴露定义的变量到模板中,无需手动 return
  4. 保持模板简洁:尽量避免在模板中写复杂的 JavaScript 表达式,可以在 <script setup> 中将复杂逻辑提取到计算属性或方法中。

总结

通过 Vue 3 的 <script setup> 语法糖,我们可以更简洁地在组件中定义响应式数据、计算属性和方法,使得插值表达式的使用更加高效和清晰。希望这篇教程能帮助你更好地理解和使用 Vue 3 的 <script setup> 进行模板插值表达式的开发。


http://www.ppmy.cn/server/143303.html

相关文章

Hugging_Face下载

能进huggingface的就能翻过去 不行的话可以去参考这个:mojie.app 1.直接原网下载 2.git(小白勿入) 如果是Linux&#xff0c;可以搜一个叫HFD&#xff08;HuggingFace_Download&#xff09; Windows的git安装参考如下&#xff1a;Git安装 建议先看看这个文档&#xff0c; 如果…

智慧社区平台系统提升物业管理效率与居民生活质量

内容概要 智慧社区平台系统是为应对现代城市管理挑战而诞生的重要工具。随着城市化进程的加快&#xff0c;传统的物业管理方式已经难以满足日益增长的居民需求和管理复杂性。因此&#xff0c;引入智能化管理手段显得尤为重要。这个系统不仅仅是一个简单的软件&#xff0c;它是…

新手小白学习docker第七弹------安装redis集群大厂面试

docker目录 0 引言1 面试题1.1 哈希取余分区1.1.1 是什么1.1.2 优点1.1.3 缺点 1.2 一致性哈希算法分区1.2.1 背景1.2.2 目的1.2.3 三大步骤&#xff08;1&#xff09;算法构建一致性哈希环&#xff08;2&#xff09;服务器IP节点映射&#xff08;3&#xff09;key落到服务器的…

Redis与数据库关联小记

Redis 和传统数据库&#xff08;如 MySQL、PostgreSQL 等&#xff09;之间有着密切的关联&#xff0c;但它们在设计理念、用例和功能上有显著的区别。以下是它们之间的一些关键关系和使用场景&#xff1a; 1. 数据存储模型 传统数据库&#xff1a;通常采用关系模型&#xff0…

【论文阅读】WaDec: Decompiling WebAssembly Using Large Language Model

论文阅读笔记:WaDec: Decompiling WebAssembly Using Large Language Model 1. 来源出处 论文标题: WaDec: Decompiling WebAssembly Using Large Language Model作者: Xinyu She, Yanjie Zhao, Haoyu Wang会议: 39th IEEE/ACM International Conference on Automated Softwar…

Python读取prophesee相机输出的raw文件

import cv2 import json import numpy as np from pathlib import Path import matplotlib.pyplot as plt from metavision_core.event_io import EventsIteratordef visualization_event_streams(p_list, t_list, x_list, y_list, save_pathNone):# 事件流的3D表示fig plt.fi…

网络协议之IP(包含V4和V6)

一、IPv4协议 1. 基本概念 IPv4&#xff08;Internet Protocol version 4&#xff09;&#xff0c;即互联网协议第4版&#xff0c;是网际协议开发过程中的第四个修订版本&#xff0c;也是此协议第一个被广泛部署的版本。IPv4使用32位&#xff08;4字节&#xff09;地址&#…

亚历克斯的无聊游戏 | 动态规划

描述 亚历克斯不喜欢无聊。这就是为什么每当他感到无聊时&#xff0c;他都会想出一些游戏。一个漫长的冬夜&#xff0c;他想出了一个游戏。 给定由n个整数组成的序列a。玩家可以选择其中的整数。在一个步骤中&#xff0c;他可以选择序列中的一个元素&#xff08;让我们把它表…