vue 计算属性get set

<template>
  <div id="app">
    <h1>用户信息</h1>
    <p>全名:{{ fullName }}</p>
    <input v-model="fullName" placeholder="请输入全名" />
    <p>姓:{{ firstName }}</p>
    <p>名字:{{ lastName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John", // 名字
      lastName: "Doe", // 姓氏
    };
  },
  computed: {
    // 计算属性 fullName,有 get 和 set
    fullName: {
      // get:用来获取 fullName,返回的是 firstName 和 lastName 拼接后的值
      get() {
        return this.firstName + " " + this.lastName;
      },
      // set:用来设置 fullName,当全名被修改时,分割新的值并更新 firstName 和 lastName
      set(newFullName) {
        const names = newFullName.split(" ");
        this.firstName = names[0]; // 更新 firstName
        this.lastName = names[1] || ""; // 更新 lastName(如果没有姓氏部分,设置为空字符串)
      },
    },
  },
};
</script>

<style>
h1 {
  font-size: 20px;
}
input {
  margin-top: 10px;
}
</style>

简单来说 返回值写get里面,set里面写数据操作

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/915260.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

74HC245

74HC245&#xff1a;典型的CMOS型缓冲门电路 在这里用于增加电压

【代码管理之道】Git 高级工作流与团队协作实践:深入探讨与实战案例

引言 在前几篇文章中&#xff0c;我们详细介绍了 Git 的基本概念、高级功能、最佳实践以及高级工作流和团队协作实践。本文将继续深入探讨 Git 的高级工作流和团队协作实践&#xff0c;帮助读者更好地理解和应用这些概念。我们将通过具体的实战案例&#xff0c;展示如何在实际…

NopReport中如何通过可扩展性设计实现二维码导出

NopReport是从零开始编写的下一代中国式报表引擎&#xff0c;它的核心仅有3000多行代码&#xff0c;但是完整实现了中国式非线性报表理论所定义的层次坐标和行列对称展开算法。 使用介绍&#xff1a;采用Excel作为设计器的开源中国式报表引擎:NopReport, 视频讲解源码分析: 非…

Linux(光速安装+rocky linux镜像)

寻找镜像 Download - Rocky Linux 如果用作桌面的&#xff0c;下载DVD的选项&#xff0c;占的存储比较多了&#xff0c;如果下载最小的&#xff0c;则没有桌面环境。 配置虚拟机 Linux&#xff08;光速安装centos镜像 图片大白话&#xff09;-CSDN博客 有些一样的我就不一…

python文件命名,不注意容易出错

在python中&#xff0c;文件名也会作为模块的名称使用。 举个例子 工程目录如下&#xff1a; 其中&#xff0c;文件夹为sys_check&#xff0c;其下还有一个sys_check1.py文件。 如果该文件名也是sys_check.py&#xff0c;可能会导致问题&#xff0c;在其它文件中引用模块时…

给阿里云OSS启用SSL

自定义域名需要指向阿里云 OSS&#xff0c;并且你希望为这个域名获取 SSL 证书&#xff0c;可以使用 DNS 验证的方法来获取证书。以下是详细步骤&#xff1a; 关键前提&#xff1a; 关键是需要在阿里云控制台的域名 权威域名解析中添加子域名aliyuncs.xxx.com 使用 DNS 验证获取…

边缘计算在智能制造中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 边缘计算在智能制造中的应用 边缘计算在智能制造中的应用 边缘计算在智能制造中的应用 引言 边缘计算概述 定义与原理 发展历程 …

定时任务进行简单监控、爬虫的自动化之旅

原文链接&#xff1a;「定时任务」进阶指南&#xff1a;监控、爬虫的自动化之旅

『VUE』25. 组件事件与v-model(详细图文注释)

目录 功能介绍示例总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 功能介绍 预期拿到一个输入搜索框,用户在搜索框中输入数据后实时把数据发送给父组件使用. 示例 主要是对前面的v-model和watch的结合使用,实现获取更新的子…

【Python TensorFlow】进阶指南(续篇二)

在前面的文章中&#xff0c;我们详细探讨了TensorFlow在实际应用中的高级功能和技术细节。本篇将继续深入探讨一些前沿话题&#xff0c;包括但不限于分布式训练、混合精度训练、神经架构搜索&#xff08;NAS&#xff09;、模型微调以及在实际项目中的最佳实践等&#xff0c;帮助…

什么是MVC模式?

MVC 模型处理数据 控制器做传递 视图用于展示 模型Model:数据验证、逻辑和持久性&#xff0c;直接与数据库进行交互控制器Controller&#xff1a;向模型询问数据&#xff0c;获取所有的数据信息视图View&#xff1a;视图用于显示信息&#xff0c;根据模型来获取信息&#xff0c…

Spring Boot 接口防重复提交解决方案

文章目录 前言使用Token机制实现步骤1.生成Token2.传递Token3.验证Token 使用Redis实现步骤1.引入Redis依赖2.生成Token3.传递Token4.验证Token 使用Spring AOP实现步骤1.定义注解2.创建切面3.使用注解 总结 前言 在Web开发中&#xff0c;防止用户重复提交表单是一个常见的需求…

【毫米波雷达(九)】前雷达软件开发遇到的问题汇总及解决方法

前雷达软件开发遇到的问题汇总及解决方法 一、CAN/CANFD通信1、雷达CAN未能正常发出数据2、雷达在车上接收不到车身信息3、程序下载失败4、DV试验发送数据偶发断连5、发送感知信息丢帧或者丢报文6、上电发出第一帧的报文时间长7、ZCANPRO有错误帧二、协议转换&#xff08;以太网…

图像处理实验四(Adaptive Filter)

一、Adaptive Filter简介 自适应滤波器&#xff08;Adaptive Filter&#xff09;是一种能够根据输入信号的统计特性自动调整自身参数以达到最佳滤波效果的滤波器。它广泛应用于信号处理领域&#xff0c;如信道均衡、系统识别、声学回波抵消、生物医学、雷达、波束形成等模块。 …

计算机网络(8)数据链路层之子层

上一篇已经讲到数据链路层可以分为两个子层&#xff0c;这次将重点讲解子层的作用和ppp协议 数据链路层的子层 数据链路层通常被分为两个子层&#xff1a; 逻辑链路控制子层&#xff08;LLC&#xff0c;Logical Link Control&#xff09;&#xff1a; LLC子层负责在数据链路…

论文5—《基于改进YOLOv5s的轻量化金银花识别方法》文献阅读分析报告

论文报告&#xff1a;基于改进YOLOv5s的轻量化金银花识别方法 论文报告文档 基于改进YOLOv5s的轻量化金银花识别方法 论文报告文档摘要国内外研究现状国内研究现状国外研究现状 研究目的研究问题使用的研究方法试验研究结果文献结论创新点和对现有研究的贡献1. 目标检测技术2. …

雷池waf安装并部署防护站点

雷池waf安装并部署防护站点 最低配置要求 操作系统&#xff1a;Linux 指令架构&#xff1a;x86_64 软件依赖&#xff1a;Docker 20.10.14 版本以上 软件依赖&#xff1a;Docker Compose 2.0.0 版本以上 最小化环境&#xff1a;1 核 CPU / 1 GB 内存 / 5 GB 磁盘 写在前面 本文…

2024第四次随堂测验参考答案

从第四次开始答案会以c语言提供&#xff0c;自行了解&#xff0c;学习 6-1 报数 报数游戏是这样的&#xff1a;有n个人围成一圈&#xff0c;按顺序从1到n编好号。从第一个人开始报数&#xff0c;报到m&#xff08;<n&#xff09;的人退出圈子&#xff1b;下一个人从1开始报…

开源 - Ideal库 - 常用枚举扩展方法(二)

书接上回&#xff0c;今天继续和大家享一些关于枚举操作相关的常用扩展方法。 今天主要分享通过枚举值转换成枚举、枚举名称以及枚举描述相关实现。 我们首先修改一下上一篇定义用来测试的正常枚举&#xff0c;新增一个枚举项&#xff0c;代码如下&#xff1a; //正常枚举 in…

如何平滑切换Containerd数据目录

如何平滑切换Containerd数据目录 大家好&#xff0c;我是秋意零。 这是工作中遇到的一个问题。搭建的服务平台&#xff0c;在使用的过程中频繁出现镜像本地拉取不到问题&#xff08;在项目群聊中老是被人出来&#x1f605;&#xff09;原因是由于/目录空间不足导致&#xff0…