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

第七篇:vue3 计算属性:computed

v-model ="firstName".   // v-model.  就是双向绑定的意思

<br/>  // 通过 v-model  进行绑定姓:<input type="text" v-model ="firstName"><br/>名:<input type="text" v-model="lastName"><br/>全称:<span>!!!!!</span><br/><script lang="ts" setup name = "Person">
import {ref} from 'vue'// 这里数据的双向绑定  , 通过 ref 实现数据响应
let firstName = ref("zhan")
let lastName = ref("san")
</script>

计算属性——只读取,不修改

// 计算属性——只读取,不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */
// 计算属性——既读取又修改
let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){   // 这里把值赋值给 对应的文本框console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeName(){fullName.value = "li-si"console.log(fullName.value)}
<div class="person">姓:<input type="text" v-model="firstName"> <br>名:<input type="text" v-model="lastName"> <br>全名:<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为:li-si</button></div>

相关文章:

第七篇:vue3 计算属性:computed

v-model "firstName". // v-model. 就是双向绑定的意思 <br/> // 通过 v-model 进行绑定姓&#xff1a;<input type"text" v-model "firstName"><br/>名&#xff1a;<input type"text" v-model"lastN…...

搭建k8s集群

一、准备工作&#xff08;所有节点&#xff09; 在开始部署之前&#xff0c;我们需要对所有节点进行以下准备工作。 1.1、关闭防火墙 # 关闭防火墙 systemctl stop firewalld# 禁止防火墙开机自启 systemctl disable firewalld1.2、 关闭 SELinux # 永久关闭 SELinux sed -…...

Android SystemUI——最近任务应用列表(十七)

对于最近任务应用列表来说,在 Android 原生 SystemUI 中是一个单独的组件。 <string-array name="config_systemUIServiceComponents" translatable="false">……<item>com.android.systemui.recents.Recents</item> </string-arra…...

java 根据前端传回的png图片数组,后端加水印加密码生成pdf,返回给前端

前端传回的png图片数组&#xff0c;后端加水印加密码生成pdf&#xff0c;返回给前端 场景&#xff1a;重点&#xff1a;maven依赖controllerservice 场景&#xff1a; 当前需求&#xff0c;前端通过html2canvas将页面报表生成图片下载&#xff0c;可以仍然不满意。 需要java后…...

《探秘鸿蒙Next:如何保障AI模型轻量化后多设备协同功能一致》

在鸿蒙Next的多设备协同场景中&#xff0c;确保人工智能模型轻量化后功能的一致性是一项极具挑战性但又至关重要的任务。以下是一些关键的方法和策略。 统一的模型架构与标准 采用标准化框架&#xff1a;选择如TensorFlow Lite、PyTorch Mobile等在鸿蒙Next上适配良好的轻量化…...

C语言二级

//请编写函数fun()&#xff0c;该函数的功能是&#xff1a;计算并输出给定整数n的所有因 //子&#xff08;不包括1和自身&#xff09;之和。规定n的值不大于1000。例如&#xff0c;在主函数 //中从键盘给n输入的值为856&#xff0c;则输出为&#xff1a;sum 763。 //注意&…...

隐私保护+性能优化,RyTuneX 让你的电脑更快更安全

RyTuneX 是一款专为 Windows 10 和 11 用户量身打造的系统优化工具&#xff0c;采用先进的 WinUI 3 框架开发&#xff0c;以其现代化的设计风格和强大的功能集合脱颖而出。这款工具不仅界面简洁美观&#xff0c;还提供了多样化的系统优化选项&#xff0c;旨在帮助用户最大化设备…...

rust学习-宏的定义与使用

rust学习-宏的定义与使用 声明宏&#xff08;macro_rules! 宏&#xff09;使用方式1. 简单的宏2. 带参数的宏3. 多个模式的宏 过程宏1. 定义过程宏1.1 属性宏1.2 函数宏1.3 派生宏 2. 使用过程宏2.1 属性宏2.2 函数宏2.3 派生宏 在 Rust 中&#xff0c;宏&#xff08;macro&…...

【学习总结|DAY032】后端Web实战:登录认证

在 Web 后端开发中&#xff0c;登录认证是保障系统安全和用户数据隐私的关键环节。本文将结合实际开发案例&#xff0c;深入探讨登录功能与登录校验的实现思路和技术细节&#xff0c;希望能帮助读者更好地掌握这一重要知识点。 一、登录功能实现 1.1 思路分析 登录功能的核心…...

leetcode 123. 买卖股票的最佳时机 III

题目&#xff1a;123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09; O(N)的算法&#xff1a; f[i] max(max(0, prices[i] - min(prices[0], prices[1], ... , prices[i - 1)), f[i - 1]); g[i] max(max(0, max(prices[i 1], prices[i 2], ... , pric…...

Apache Tika 详解

Apache Tika是一个开源的、跨平台的库&#xff0c;专门用于检测、提取和解析多种文件格式的元数据。以下是对Apache Tika的详细解析&#xff1a; 一、概述 Apache Tika旨在为各种类型的数据提取提供一个单一的API&#xff0c;它支持多种文件格式&#xff0c;包括文档、图片、…...

ChatGPT被曝存在爬虫漏洞,OpenAI未公开承认

OpenAI的ChatGPT爬虫似乎能够对任意网站发起分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;而OpenAI尚未承认这一漏洞。 本月&#xff0c;德国安全研究员Benjamin Flesch通过微软的GitHub分享了一篇文章&#xff0c;解释了如何通过向ChatGPT API发送单个HTTP请求…...

Qt——界面优化

在Qt中进行界面优化&#xff0c;可以从以下几个方面入手: 1.使用QWidget:setVisible来控制Widget的 显示和隐藏&#xff0c;而不是删除和重建。 2.使用QPainter直 接绘制组件&#xff0c;避免使用复杂的布局。 3.使用QSS进行样式设置&#xff0c; 减少图片资源的使用。 4.使…...

python学opencv|读取图像(四十一 )使用cv2.add()函数实现各个像素点BGR叠加

【1】引言 前序已经学习了直接在画布上使用掩模&#xff0c;会获得彩色图像的多种叠加效果&#xff0c;相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;四十&#xff09;掩模&#xff1a;三通道图像的局部覆盖-CSDN博客 这时候如果更进一步&#xff0c;直接…...

Spring MVC和Spring WebFlux的区别

目录 一、编程模型 二、IO处理方式 三、数据流处理 四、适用场景 五、生态系统 在当今的Web开发领域&#xff0c;Spring框架无疑占据着重要的地位。其中&#xff0c;Spring MVC和Spring WebFlux作为Spring框架中用于构建Web应用程序的两个重要模块&#xff0c;各自具有独特…...

Linux探秘坊-------4.进度条小程序

1.缓冲区 #include <stdio.h> int main() {printf("hello bite!");sleep(2);return 0; }执行此代码后&#xff0c;会 先停顿两秒&#xff0c;再打印出hello bite&#xff0c;但是明明打印在sleep前面&#xff0c;为什么会后打印呢&#xff1f; 因为&#xff…...

Llama 3:开源大模型的里程碑式突破

标题&#xff1a;Llama 3&#xff1a;开源大模型的里程碑式突破 文章信息摘要&#xff1a; Meta通过Llama 3展现了开源LLM的重大突破&#xff1a;采用超大规模训练数据和多阶段训练方法&#xff08;SFT、rejection sampling、PPO和DPO&#xff09;&#xff0c;突破了传统的Chi…...

计算机网络 (56)交互式音频/视频

一、定义与特点 定义&#xff1a;交互式音频/视频是指用户使用互联网和其他人进行实时交互式通信的技术&#xff0c;包括语音、视频图像等多媒体实时通信。 特点&#xff1a; 实时性&#xff1a;音频和视频数据是实时传输和播放的&#xff0c;用户之间可以进行即时的交流。交互…...

STM32 GPIO工作模式

GPIO工作模式 1. GPIO简介2. GPIO工作模式2.1 输入浮空2.2 输入上拉2.3 输入下拉2.4 模拟2.5 开漏输出2.6 推挽输出2.7 开漏式复用功能2.8 推挽式复用功能 1. GPIO简介 GPIO 是通用输入输出端口的简称&#xff0c;简单来说就是 STM32 可控制的引脚&#xff0c;STM32 芯片的 GPI…...

自动化实现的思路变化

阶段一&#xff1a; 1、成功调用。第一步&#xff0c;一般是用现用的工具&#xff0c;或者脚本成功调用接口 2、解决关联接口的参数传递。有的接口直接&#xff0c;存在参数的传递&#xff0c;一般的思路&#xff0c;就是将这个参数设置为变量。 3、简化代码。总会有些东西是重…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...