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

ops/2024/11/17 22:16:29/
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/ops/134219.html

相关文章

DApp开发:定制化解决方案与源码部署的一站式指南

去中心化应用&#xff08;DApp&#xff09;随着区块链技术的发展&#xff0c;成为众多行业探索与创新的重要方向。无论是金融、供应链、游戏&#xff0c;还是社交和艺术市场&#xff0c;DApp都为传统业务模式带来了全新可能。然而&#xff0c;开发一款DApp并非易事&#xff0c;…

Science Robotics 封面论文:视触觉传感器的手内操作

现在&#xff0c;随便丢给机械手一个陌生物体&#xff0c;它都可以像人类一样轻松拿捏了。除了苹果&#xff0c;罐头、乐高积木、大象玩偶、骰子&#xff0c;都不在话下&#xff1a; 这就是来自Meta FAIR团队最新的NeuralFeels技术&#xff0c;通过融合触觉和视觉&#xff0c;机…

uniapp解析蓝牙设备响应数据bug

本文章为了解决《uniapp 与蓝牙设备收发指令详细步骤(完整项目版)》中第十步的Array 解析成 number函数bug 1、原代码说明 function array16_to_number(arrayValue) {const newArray arrayValue.filter(item > String(item) ! 00 || String(item) ! 0)const _number16 ne…

OpenWebUI,RAG+外部知识库+AI写文的开源应用

引言 自从去年AI火起来之后&#xff0c;很多人便热衷于寻找适合自用的AI开源项目&#xff0c;把各家大模型API接入到自己的AI程序里&#xff0c;便可以通过AI辅助完成一系列日常任务&#xff0c;比如内容翻译/润色/总结/撰写、格式转换、数据分类、代码分析、角色扮演等等。 …

江协科技之STM32驱动1.3寸/0.96寸/0.91寸OLED显示屏介绍

目录 编码介绍 ASCII码 汉字编码 取模软件 江协科技OLED库适用器件 SSD1306简介 模块引脚更改 0.91寸OLED适配 模块驱动必备知识 驱动代码 OLED_Font.h OLED.h OLED.c 编码介绍 ASCII码 ASCII码是一套数字到字符的映射标准&#xff0c;它规定了用什么数字表示…

XML Schema 字符串数据类型

XML Schema 字符串数据类型 1. 概述 XML Schema 是一种用于定义 XML 文档结构和内容的语言。它提供了一种强大的机制来描述 XML 数据的类型、结构和约束。在 XML Schema 中&#xff0c;字符串数据类型是一种基本数据类型&#xff0c;用于表示文本数据。 2. 字符串数据类型 …

生成自签名证书并配置 HTTPS 使用自签名证书

生成自签名证书 1. 运行 OpenSSL 命令生成证书和私钥 在终端中输入以下命令&#xff0c;生成自签名证书和私钥文件&#xff1a; sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout self_signed.key -out self_signed.pem-x509&#xff1a;生成自签名证书。…

【人工智能】从零开始实现K-Means聚类:Python手动实现与算法原理详解

解锁Python编程的无限可能&#xff1a;《奇妙的Python》带你漫游代码世界 K-Means是一种常用的无监督学习算法&#xff0c;广泛应用于数据聚类分析。本文将详细讲解K-Means的数学原理&#xff0c;包括目标函数和算法的迭代过程&#xff0c;阐述算法如何通过迭代优化簇的质心位…