vue3中computed的用法

 一、完整代码

<template><div class="about"><h1>Computed的用法</h1><h3>姓:{{ person.firstName }}</h3><input type="text" v-model="person.firstName"><h3>名:{{ person.lastName }}</h3><input type="text" v-model="person.lastName"><div v-if="person.fullName"><h3>全名:{{ person.fullName }}</h3><input type="text" v-model="person.fullName"></div></div>
</template><script>
import { reactive, computed } from 'vue';export default {name:'aboutPage',setup() {let person = reactive({firstName: '张',lastName: '三'})person.fullName = computed({get() {return person.firstName + '-' + person.lastName},set(value) {const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}})return {person}}
}
</script>

二、主要代码

get:访问了这个属性

set:修改这个属性时操作的业务逻辑

person.fullName = computed({get() {return person.firstName + '-' + person.lastName},set(value) {const nameArr = value.split('-')person.firstName = nameArr[0]person.lastName = nameArr[1]}
})

三、效果

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习中的不确定性综述

领域学者&#xff1a; http://www.gatsby.ucl.ac.uk/~balaji/ 论文标题&#xff1a; A Survey of Uncertainty in Deep Neural Networks 论文链接&#xff1a; https://arxiv.org/pdf/2107.03342.pdf 概要 在过去的十年中&#xff0c;神经网络几乎遍及所有科学领域&#x…

2021年下半年 软件设计师 上午试卷(1-28)

计算机指令系统采用多种寻址方式。立即寻址是指操作数包含在指令中&#xff0c;寄存器寻址是指操作数在寄存器中&#xff0c;直接寻址是指操作数的地址在指令中。这三种寻址方式获取操作数的速度 &#xff08;1&#xff09; 。 &#xff08;1&#xff09; A. 立即寻址最快&am…

Springcloud介绍

1.基本介绍 Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发&#xff0c;如服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控等&#xff0c;都可以用Spring Boot的开发风格做到一键启动和部署。Spring …

基于YOLO实现的口罩佩戴检测 - python opemcv 深度学习 计算机竞赛

文章目录 0 前言1 课题介绍2 算法原理2.1 算法简介2.2 网络架构 3 关键代码4 数据集4.1 安装4.2 打开4.3 选择yolo标注格式4.4 打标签4.5 保存 5 训练6 实现效果6.1 pyqt实现简单GUI6.3 视频识别效果6.4 摄像头实时识别 7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xf…

树与二叉树(考研版)

文章目录 树与二叉树树的基本概念结点、树属性的描述树的性质 二叉树的概念二叉树的性质二叉树的构建二叉树的遍历先序遍历中序遍历后序遍历层次遍历 递归算法和非递归算法的转换源代码 线索二叉树二叉树的线索化线索二叉树 找前驱/后继 树和森林树的存储 树与二叉树的应用哈夫…

Python 深度学习入门之CNN

CNN 前言一、CNN简介1、简介2、结构 二、CNN简介1、输出层2、卷积层3、池化层4、全连接层5、输出层 前言 1024快乐&#xff01;1024快乐&#xff01;今天开新坑&#xff0c;学点深度学习相关的&#xff0c;说下比较火的CNN。 一、CNN简介 1、简介 CNN的全称是Convolutiona…

java中的异常,以及出现异常后的处理【try,catch,finally】

一、异常概念 异常 &#xff1a;指的是程序在执行过程中&#xff0c;出现的非正常的情况&#xff0c;最终会导致JVM的非正常停止。 注意: 在Java等面向对象的编程语言中&#xff0c;异常本身是一个类&#xff0c;产生异常就是创建异常对象并抛出了一个异常对象。Java处理异常的…

XSS攻击(3), 实战XSS注入思路

XSS注入, XSS实战思路 一, 可以输入文本或直接在url后面提交参数. 网页源码: <input namekeyword value"">对于这种input标签, 首先可以考虑使用 onclick 等事件来执行js. 先输入 <> , " , onclick() 等等提交, 查看页面源代码. 如果输入的符号没…

Nginx 配置文件解读

一.配置文件解读 nginx配置文件主要分为四个部分&#xff1a; main{ #&#xff08;全局设置&#xff09;http{ #服务器配置upstream{} #&#xff08;负载均衡服务器设置&#xff09;server{ #&#xff08;主机设置&#xff1a;主要用于指定主机和端口&#xff09;location{} …

CUDA学习笔记(十四) Constant Memory

转载至https://www.cnblogs.com/1024incn/tag/CUDA/ CONSTANT MEMORY constant Memory对于device来说只读但是对于host是可读可写。constant Memory和global Memory一样都位于DRAM&#xff0c;并且有一个独立的on-chip cache&#xff0c;比直接从constant Memory读取要快得多…

【C++笔记】C++继承

【C笔记】C继承 一、继承的概念二、继承的语法和权限三、父类和子类成员之间的关系3.1、子类赋值给父类(切片)3.2、同名成员 四、子类中的默认成员函数4.1、构造函数4.2、拷贝构造4.3、析构函数 五、C继承大坑之“菱形继承”5.1、什么是“菱形继承”5.2、解决方法 一、继承的概…

数据结构-- 并查集

0. 引入 并查集是来解决等价问题的数据结构。 离散数学中的二元关系。 等价关系需满足自反性、对称性、传递性。 a ∈ S , a R a a R b & b R a a R b ∩ b R c > a R c a \in S, aRa \\ aRb \& bRa \\ aRb \cap bRc >aRc a∈S,aRaaRb&bRaaRb∩bRc>a…

【Opencv】OpenCV使用CMake和MinGW的编译安装出错解决

编译时出现的错误&#xff1a; mingw32-make[1]: *** [modules/core/CMakeFiles/opencv_core.dir/all] Error 2 Makefile:161: recipe for target ‘all’ failed mingw32-make: *** [all] Error 2解决方法&#xff1a; 根据贴吧老哥的解答&#xff0c;发现是mingw版本有问题导…

【JAVA学习笔记】43 - 枚举类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter11/src/com/yinhai/enum_ 〇、创建时自动填入版权 作者等信息 如何在每个文件创建的时候打入自己的信息以及版权呢 菜单栏-File-setting-Editor-File and Code Templaters -Includes-输入信…

自动化测试07Selenium01

目录 什么是自动化测试 Selenium介绍 Selenium是什么 Selenium特点 工作原理 SeleniumJava环境搭建 Selenium常用的API使用 定位元素findElement CSS选择语法 id选择器&#xff1a;#id 类选择 .class 标签选择器 标签名 后代选择器 父级选择器 自己选择器 xpath …

2.1 向量与线性方程组

一、行图像与列图像 线性代数的中心问题是求解线性方程组。线性的意思是这些方程的未知数是一次的&#xff0c;即每个未知数只会乘数字&#xff0c;而不会出现 x x x 与 y y y 相乘的项。下面是一个由两个未知数组成的方程组&#xff1a; 两个方程 两个未知数 { x − 2 y 1…

关于QTableWidget的it所占内存的释放问题

说起QTableWidget&#xff0c;我们一般都是用QTableWidget进行数据显示或者使用QTableWidget其他控件组合进行设置。 这里主要说说数据展示&#xff0c;我们在进行数据展示时&#xff0c;数据量分为两种有限和无限。不管是QTableWidget中插入的数据有限还是数据无限。在数据多时…

【从0到1设计一个网关】什么是网关?以及为什么需要自研网关?

文章目录 什么是网关&#xff1f;网关类型网关的优缺点目前的网关解决方案有哪些&#xff1f;为什么要自研Gateway网关&#xff1f;自研网关需要注意什么&#xff1f; 注&#xff1a; 这篇文章作为我的网关的第一篇文章&#xff0c;并不涉及任何代码&#xff0c;只是提及了网关…

LeetCode 155. 掷骰子等于目标和的方法数:动态规划

【LetMeFly】1155.掷骰子等于目标和的方法数&#xff1a;动态规划 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-dice-rolls-with-target-sum/ 这里有 n 个一样的骰子&#xff0c;每个骰子上都有 k 个面&#xff0c;分别标号为 1 到 k 。 给定三个整数 …

如何在国际腾讯云服务器上设置IP节点的密码?

跟着云计算技术的发展&#xff0c;越来越多的企业和个人开始运用云服务器来存储和处理数据。腾讯云服务器是一款非常受欢迎的云服务器产品&#xff0c;它提供了高效稳定的计算能力。在运用腾讯云服务器的过程中&#xff0c;咱们可能需求设置IP节点的暗码&#xff0c;以便维护咱…