当前位置： 首页 > news >正文

Vue实现字符串首字母大写、翻转字符串、获取用户选定的文本

news 2025/12/25 21:41:33

目录

  • Vue2实现字符串首字母大写
  • Vue3实现字符串首字母大写
  • Vue2实现翻转字符串
  • Vue3实现翻转字符串
  • Vue2获取用户选定的文本
  • Vue3获取用户选定的文本

Vue2实现字符串首字母大写

请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>实现字符串首字母大写</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><input v-model="inputText" placeholder="输入一个字符串" /><p>{{ capitalizedText }}</p></div><script>new Vue({el: '#app',data() {return {inputText: ''}},computed: {capitalizedText() {if (this.inputText) {return this.inputText.charAt(0).toUpperCase() + this.inputText.slice(1)} else {return ''}}}})</script>
</body></html>

在这个Vue 2的案例中，我们使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含一个输入框和一个段落元素的<div>容器，并为其设置了一个id为app。

在JavaScript部分，我们创建了一个Vue实例，并将其挂载到id为app的元素上。在Vue实例中，我们定义了一个data属性inputText，用于存储用户输入的字符串。

然后，我们定义了一个计算属性capitalizedText，它会根据用户输入的字符串生成首字母大写的结果。在计算属性中，我们通过v-model指令将输入框的值绑定到inputText上。

当用户在输入框中输入一个字符串时，计算属性会实时更新并将首字母大写的结果显示在页面上。

Vue3实现字符串首字母大写

请添加图片描述

<template><div><input v-model="inputText" placeholder="输入一个字符串" /><p>{{ capitalizedText }}</p></div>
</template><script>
import { ref, computed } from 'vue'export default {setup() {const inputText = ref('')const capitalizedText = computed(() => {if (inputText.value) {return inputText.value.charAt(0).toUpperCase() + inputText.value.slice(1)} else {return ''}})return {inputText,capitalizedText}}
}
</script>

在这个Vue 3的例子中，我们使用了Composition API和setup()函数。我们从vue包中导入了ref和computed函数。

在setup()函数内部，我们使用ref()创建了一个可响应的引用，用于存储inputText变量的值。

然后，我们使用computed()函数定义了一个计算属性capitalizedText。在计算属性内部，我们使用.value属性访问inputText的值。其余逻辑与Vue 2的例子相同。

最后，我们从setup()函数中返回inputText和capitalizedText，以便在模板中使用。

以下是Vue 2和Vue 3分别实现翻转字符串的案例，包括完整的HTML代码、案例代码思路和详细描述。

Vue2实现翻转字符串

请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta ch****t="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue2实现翻转字符串</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><input v-model="inputText" placeholder="输入一个字符串" /><p>{{ reversedText }}</p></div><script>new Vue({el: '#app',data() {return {inputText: ''}},computed: {reversedText() {if (this.inputText) {return this.inputText.split('').reverse().join('')} else {return ''}}}})</script>
</body></html>

在这个Vue 2的案例中，我们同样使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含一个输入框和一个段落元素的<div>容器，并为其设置了一个id为app。

在JavaScript部分，我们创建了一个Vue实例，并将其挂载到id为app的元素上。在Vue实例中，我们定义了一个data属性inputText，用于存储用户输入的字符串。

然后，我们定义了一个计算属性reversedText，它会将用户输入的字符串翻转后返回。在计算属性中，我们通过v-model指令将输入框的值绑定到inputText上。

当用户在输入框中输入一个字符串时，计算属性会实时更新并将翻转后的结果显示在页面上。

Vue3实现翻转字符串

请添加图片描述

<template><div><input v-model="inputText" placeholder="输入一个字符串" /><p>{{ reversedText }}</p></div>
</template><script>
import { ref, computed } from 'vue'export default {setup() {const inputText = ref('')const reversedText = computed(() => {if (inputText.value) {return inputText.value.split('').reverse().join('')} else {return ''}})return {inputText,reversedText}}
}
</script>

在这个Vue 3的案例中，我们使用了Vue的单文件组件方式来实现。在模板中，我们有一个包含一个输入框和一个段落元素的<div>容器。

在JavaScript部分，我们使用了Vue 3的Composition API。通过import { ref, computed } from 'vue';这行代码引入了需要的函数。

然后，我们在setup()函数中定义了响应式的inputText变量和计算属性reversedText。

在计算属性中，我们通过inputText.value获取用户输入的字符串，并使用split()方法将字符串转换成数组，然后使用reverse()方法将数组翻转，最后使用join()方法将数组转换成字符串。如果用户没有输入字符串，则返回空字符串。

最后，我们通过export default将组件导出。

当用户在输入框中输入一个字符串时，计算属性会实时更新并将翻转后的结果显示在页面上。

Vue2获取用户选定的文本

请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue2获取用户选定的文本</title><script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script></head><body><div id="app"><div><span>选中文字：</span><span>{{ selectedText }}</span></div><div><textarea v-model="text" @mouseup="getSelectedText"></textarea></div></div><script>new Vue({el: '#app',data: {text: '',selectedText: ''},methods: {getSelectedText() {this.selectedText = window.getSelection().toString()}}})</script></body>
</html>

在这个Vue 2的案例中，我们使用了CDN引入Vue 2的库。在HTML文件中，我们有一个包含两个<div>元素的<div>容器，并为其设置了一个id为app。

第一个<div>元素用于显示选中的文本，我们使用了双花括号语法将selectedText数据绑定到文本节点上。

第二个<div>元素包含一个<textarea>，它通过双向数据绑定将用户输入的文本与text数据属性关联。

在JavaScript部分，我们在Vue实例中定义了text和selectedText作为数据属性。

我们还定义了一个名为getSelectedText的方法，在用户鼠标选择文本时触发。在这个方法中，我们使用window.getSelection().toString()来获取用户选定的文本，并将其赋值给selectedText数据属性。

以上是Vue 2实现获取用户选定文本的案例。您可以将代码复制粘贴到HTML文件中，然后在浏览器中打开该文件，即可看到完整的效果。

Vue3获取用户选定的文本

请添加图片描述

<template><div><div><span>选中文字：</span><span>{{ selectedText }}</span></div><div><textarea v-model="text" @mouseup="getSelectedText"></textarea></div></div>
</template><script>
import { ref } from 'vue'export default {setup() {const text = ref('')const selectedText = ref('')const getSelectedText = () => {selectedText.value = window.getSelection().toString()}return {text,selectedText,getSelectedText}}
}
</script>

在这个Vue 3的案例中，我们使用了Vue的单文件组件方式来实现。在模板中，我们有一个包含两个<div>元素的<div>容器。

第一个<div>元素用于显示选中的文本，我们使用了双花括号语法将selectedText绑定到文本节点上。

第二个<div>元素包含一个<textarea>，它通过双向数据绑定将用户输入的文本与text关联。

在JavaScript部分，我们使用了Vue 3的Composition API。通过import { ref } from 'vue';这行代码引入了需要的函数。

然后，在setup()函数中定义了响应式的text和selectedText变量，并编写了一个名为getSelectedText的方法。

在getSelectedText方法中，我们使用window.getSelection().toString()来获取用户选定的文本，并将其赋值给selectedText。

最后，我们通过export default将组件导出。

以上是Vue 3实现获取用户选定文本的案例。您可以将代码复制粘贴到.vue文件中，并在Vue项目中使用该组件，即可看到完整的效果。

相关文章：

Vue实现字符串首字母大写、翻转字符串、获取用户选定的文本

目录 Vue2实现字符串首字母大写Vue3实现字符串首字母大写Vue2实现翻转字符串Vue3实现翻转字符串Vue2获取用户选定的文本Vue3获取用户选定的文本 Vue2实现字符串首字母大写 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"…...

编程日记 2024/1/19 8:51:05

基于springboot+vue的旅游网站系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…...

编程日记 2024/1/19 8:50:04

GB/T28181-2022之图像抓拍规范解读和设计实现

技术背景 GB/T28181-2022相对2016版&#xff0c;对图像抓拍有了明确的界定&#xff0c;图像抓拍在视频监控行业非常重要, Android平台GB28181设备接入端&#xff0c;无需实时上传音视频实时数据的情况下&#xff0c;就可以抓图上传到指定的图像存储服务器上。 图像抓拍基本要…...

编程日记 2024/1/19 8:47:01

阿赵UE学习笔记——10、Blender材质和绘制网格体

阿赵UE学习笔记目录   大家好&#xff0c;我是阿赵。   之前介绍了虚幻引擎的材质和材质实例。这次来介绍一个比较有趣的内置的Blender材质。   在用Unity的时候&#xff0c;我做过一个多通道混合地表贴图的效果&#xff0c;而要做过一个刷顶点颜色混合地表和水面的效果。…...

编程日记 2024/1/19 8:44:58

数据结构--串

本文为复习的草稿笔记&#xff0c;&#xff0c;&#xff0c;有点乱 1. 串的基本概念和基本操作 串是由零个或多个字符组成的有限序列 2. 串的存储结构 3.串的应用 模式匹配 BF算法&#xff08;简单匹配算法 穷举法 算法思路&#xff1a;从子串的每一个字符开始依次与主串…...

编程日记 2024/1/19 8:43:57

RabbitMQ交换机(3)-Topic

1.Topic模式 RabbitMQ的Topic模式是一种基于主题的消息传递模式。它允许发送者向一个特定的主题&#xff08;topic&#xff09;发布消息&#xff0c;同时&#xff0c;订阅者也可以针对自己感兴趣的主题进行订阅。 在Topic模式中&#xff0c; 主题通过一个由单词和点号组成的字…...

编程日记 2024/1/19 8:41:55

前端密钥怎么存储，以及临时存储一些数据，如何存储才最安全？

前端密钥存储安全的方案&#xff1a; 1、使用浏览器提供的本地存储&#xff1a;现代浏览器提供了本地存储机制&#xff0c;例如 Web Storage&#xff08;localStorage 和 sessionStorage&#xff09;或 IndexedDB。可以将密钥存储在这些本地存储中&#xff0c;并使用浏览器提供…...

编程日记 2024/1/19 8:40:54

第16章_网络编程拓展练习(TCP编程,UDP编程)

文章目录 第16章_网络编程拓展练习TCP编程1、学生与老师交互2、查询单词3、拓展&#xff1a;查询单词4、图片上传5、拓展&#xff1a;图片上传6、多个客户端上传文件7、群聊 UDP编程8、群发消息 第16章_网络编程拓展练习 TCP编程 1、学生与老师交互 案例&#xff1a;客户端模…...

编程日记 2024/1/19 8:39:54

深入Docker5：安装nginx部署完整项目

目录 准备 为什么要使用nginx mysql容器构建 1.删除容器 2.创建文件夹 3.上传配置文件 4.命令构建mysql容器 5.进入mysql容器&#xff0c;授予root所有权限 6.在mysql中用命令运行sql文件 7.创建指定数据库shop 8.执行指定的sql文件 nginx安装与部署 1.拉取镜像 2…...

编程日记 2024/1/19 8:36:52

HBASE学习四：常用命令汇总梳理（包括数据库、zk、hdfs相关操作与配置）

1、服务状态 1、后台查询 hbase shell #进入hbase的shell页面，配置环境变量可直接执行。status #查看当前服务状态status detailed #查看当前详细服务信息，包括master的active和standby信息version 查看版本信息 2、页面查询 http://HMASTERip:16010 #查看master 状态 …...

编程日记 2024/1/19 8:34:50

Android平台RTSP|RTMP播放端实时快照保存JPG还是PNG？

JPG还是PNG&#xff1f; 实际上&#xff0c;在前几天的blog&#xff0c;我们有从压缩方式、图像质量、透明效果、可编辑性等各方面做过差异化的介绍。 压缩方式&#xff1a;JPG是一种有损压缩格式&#xff0c;通过丢弃图像数据来减小文件大小&#xff0c;因此可能会损失一些图…...

编程日记 2024/1/19 8:33:49

【人工智能】之深入了解嵌入模型中的 Token：NLP 中的语义之旅(1)

自然语言处理&#xff08;NLP&#xff09;领域的发展在很大程度上受到了嵌入模型的推动。嵌入模型通过将文本中的每个 token 转换为向量表示&#xff0c;为计算机理解语言提供了强大的工具。本文将深入研究嵌入模型中的 token&#xff0c;揭示它在 NLP 中的重要性以及在语义表示…...

编程日记 2024/1/19 8:32:49

UML-实现图（组件图和部署图）

实现图是从系统的层次来描述的&#xff0c;描述硬件的组成和布局&#xff0c;描述软件系统划分和功能实现。 UML-实现图&#xff08;组件图和部署图&#xff09; 一、组件图1.组件图的元素&#xff08;1&#xff09;组件&#xff08;2&#xff09;接口&#xff08;3&#xff09…...

编程日记 2024/1/19 8:31:48

苹果Find My可查找添加32件物品，伦茨科技ST17H6x芯片加速产品赋能

苹果最近更新的支持文档证实&#xff0c;从 iOS 16 开始&#xff0c;"Find My"可查找添加物品从16件增加到32件&#xff0c;AirTag 和“查找”网络中的物品利用“查找”网络的强大功能来发挥作用&#xff0c;这个网络由数亿台加密的匿名 Apple 设备构成。“查找”网络…...

编程日记 2024/1/19 8:28:45

postman后端测试时invalid token报错+token失效报错解决方案

报错信息1{“msg”:“invalid token”,“code”:401} 没有添加postman的token信息 报错信息2{“msg”: “token失效&#xff0c;请重新登录”,“code”: 401} 写了token但是token信息写的是错的,会提示token失效 解决方案如下 仅写完后端的查询,但是前端还没写的时候,可…...

编程日记 2024/1/19 8:24:42

使用 mybatis-plus 的mybaits的一对多时， total和record的不匹配问题

应该是框架的问题&#xff0c;去官方仓库提了个issues&#xff0c;等回复 https://github.com/baomidou/mybatis-plus/issues/5923 回复来了&#xff1a; 背景 发现 record是两条&#xff0c;但是total显示3 使用resultMap一对多时&#xff0c;三条数据会变成两条&#xff0…...

编程日记 2024/1/19 8:22:40

SpringCloud之Nacos

一、微服务介绍 1. 什么是微服务 2014年，Martin Fowler（马丁福勒 ） 提出了微服务的概念，定义了微服务是由以单一应用程序构成的小服务，自己拥有自己的进程与轻量化处理，服务依业务功能设计，以全自动的方式部署，与其他服务使用 HTTP API 通信。同时服务会使用最小的规模…...

编程日记 2024/1/19 8:16:34

小封装高稳定性振荡器 Sg2520egn / sg2520vgn, sg2520ehn / sg2520vhn

描述 随着物联网和ADAS等5G应用的实施&#xff0c;数据流量不断增长&#xff0c;网络基础设施变得比以往任何时候都更加重要。IT供应商一直在快速建设数据中心&#xff0c;并且对安装在数据中心内部/内部的光模块有很大的需求。此应用需要具有“小”&#xff0c;“低抖动”和“…...

编程日记 2024/1/19 8:13:31

使用 Apache POI 更新/覆盖 特定的单元格

使用 Apache POI 更新特定的单元格 一. 需求二. 实现三. 效果 一. 需求 将以下表中第4行&#xff0c;第4列的单元格由“张宇”更新为“汤家凤”&#xff0c;并将更行后的结果写入新的Excel文件中&#xff1b; 二. 实现 使用Apache POI&#xff0c;可以精确定位到需要更改的单…...

编程日记 2024/1/19 8:09:28

Spring Boot整合MyBatis-Plus

引言 在现代软件开发中&#xff0c;我们经常需要处理大量的数据。为了有效地管理这些数据&#xff0c;我们需要使用一些强大的框架。其中&#xff0c;Spring Boot和MyBatis-Plus是两个非常流行的框架。Spring Boot是一个基于Spring的开源Java框架&#xff0c;可以用于创建独立…...

编程日记 2024/1/19 8:04:24

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/25 19:27:00

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2025/12/25 9:44:21

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/12/25 20:11:20

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/21 4:25:33

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/12/19 10:26:07

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/11/6 8:47:31

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/12/20 14:47:54

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43