当前位置: 首页 > 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、简化代码。总会有些东西是重…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...