Vue框架学习笔记——计算属性

文章目录

  • 前文提要
  • 代码需求描述
    • 插值语法实现
    • methods实现
  • 计算属性
      • getter执行时间:
      • setter
  • 计算属性简写形式(只读不改,才能如此简写)
  • slice截取元素,限制输入字符数量


前文提要

本人仅做个人学习记录,如有错误,请多包涵


代码需求描述

输入姓和名,能够将二者结合起来输出,姓和名之间使用’-'符号分隔

插值语法实现

<body><div id="box">姓:<input type="text" placeholder="" v-model:value="firstName"><br/><br/>名:<input type="text" placeholder="" v-model:value="secondName"><br/><br/>姓名:{{firstName}}-{{secondName}}</div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {firstName:'张',secondName:'三',}})</script>
</body>

其中v-model:value=可以简写为v-model=,也就是’:value’可以省略掉
实现效果如下:
在这里插入图片描述
在这里插入图片描述

methods实现

代码如下:

<body><div id="box">姓:<input type="text" placeholder="" v-model:value="firstName"><br /><br />名:<input type="text" placeholder="" v-model:value="secondName"><br /><br />姓名:{{name()}}<br /><br />测试:<input type="text" placeholder="测试" v-model:value="nn"><br /><br /></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {firstName: '张',secondName: '三',nn:'yi'},methods: {name(){console.log(1)return this.firstName+'-'+this.secondName}}})</script>
</body>

methods中的函数会被添加到Vue实例中,因此可以直接在插值语法中调用。
data中的任何数据发生变化的时候,Vue的模版都会被重新解析,模版中含有methods中的name函数,methods不管函数返回值有没有变化,都会调用一次函数,因此会多次调用name函数。
所以每次查看和修改姓和名,都会调用一次该函数。
method中的函数,没有写成箭头函数,则可以从this指针这里访问Vue实例,Vue实例中因为数据代理添加了data中的数据,因此可以如此写。

呈现效果:
在这里插入图片描述

在这里插入图片描述

每在名中添加、删除一次字符,都会调用一次函数,在控制台输出一次1。

就算修改的不是和函数返回值有关的属性,也会调用函数
在这里插入图片描述

计算属性

将上文的代码修改为这样,使用计算属性computed也可以起到上文的效果,而且效率更高。

<body><div id="box">姓:<input type="text" placeholder="" v-model:value="firstName"><br /><br />名:<input type="text" placeholder="" v-model:value="secondName"><br /><br />姓名:{{name_}}<br /><br />测试:<input type="text" placeholder="测试" v-model:value="nn"><br /><br /></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {firstName: '张',secondName: '三',nn:"yi"},methods: {name(){return this.firstName+'-'+this.secondName}},computed:{name_:{get(){console.log('调用了get')return this.firstName+'-'+this.secondName},set(value){console.log('调用了set')const arr=value.split('-')this.firstName=arr[0]this.secondName=arr[1]}}}})</script>
</body>

呈现效果:
在这里插入图片描述
代码解释:
computed中的属性不能和methods中的函数名一致,会出错。
set函数中无法直接通过firstName访问到data中的firstName,必须通过this指针锁定Vue实例,再进一步锁定firstName

计算属性中的属性是不存在的,是使用其他的属性计算出来的,这也是为什么叫做计算属性的原因。
原理:底层借助了Object.defineproperty提供的getter和setter。

getter执行时间:

(1)初次读取时,会执行一次。
(2)当依赖的数据被改变时会再次调用。

注意点:不要使用vm.data_.get()调用函数,这是错误的

和methods方法不同,当返回的数据没有发生变化的时候,methods是会继续执行一遍了,而computed内部含有缓存机制(复用),当没有触发get函数执行的时候,有用到该计算属性的时候,会直接从缓存中提取,效率更高,调试更加方便。

示例图片:
在这里插入图片描述
当你修改的属性,和计算属性中包含的属性全无关系的时候,就算整个模版被重新解析,methods中的函数重新执行,computed中的计算属性也只会执行最开始的那次(因为相关data属性没有发生变化)

setter

在这里插入图片描述
当你对计算属性进行更改的时候,会调用setter,而和计算属性有关的属性发生变化的时候,会触发调用get函数,因此控制台会如此输出

计算属性简写形式(只读不改,才能如此简写)

当你规定的计算属性只读不写,则可以通过修改上文代码,写成这样应用:

computed:{name_:function(){console.log('调用了get')return this.firstName+'-'+this.secondName}
}

注意:要求只读不写,别修改计算属性。
不过这还不是最简形式,还可以进一步简化:

computed:{name_(){console.log('调用了get')return this.firstName+'-'+this.secondName}
}

注意name_不是函数,依旧是属性。

slice截取元素,限制输入字符数量

可以将getter中的代码改为下述样式:

return this.firstName.slice(0,3)+'-'+this.secondName

从而限制字符个数,最少为0,最多3个

示例图片:
在这里插入图片描述
超过3个字符的无法记录到计算属性中。


至此,结束。

如果你觉得这篇文章写的不错,多多点赞~收藏吧!

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

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

相关文章

Leetcode 2939. Maximum Xor Product

Leetcode 2939. Maximum Xor Product 1. 解题思路2. 代码实现3. 代码优化&#xff1a; 题目链接&#xff1a;2939. Maximum Xor Product 1. 解题思路 这一题思路上来说我们就是逐位进行考虑。 对于xor操作&#xff0c;显然我们只有以下两种情况&#xff1a; 00或者11&…

【brpc学习实践九】mbvar及bvar可观测

概念、学习地址 mbvar中有两个类&#xff0c;分别是MVariable和MultiDimension&#xff0c;MVariable是多维度统计的基类&#xff0c;MultiDimension是派生模板类。也是主要用来多多线程计数用的。这里用到再详细去了解即可 https://github.com/luozesong/brpc/blob/master/do…

知识的分层:know-what/how/why

知识&#xff08;knowledge&#xff09;表示知道某些信息。通常而言&#xff0c;知识是正确的&#xff0c;但不一定是完备的。知识本身有自己的适用范围&#xff0c;特别是工程技术类问题。 根据知识的类型&#xff0c;可分为三类&#xff1a; know-whatknow-howknow-why kno…

Java多线程二-线程安全

1、线程安全问题 多个线程&#xff0c;同时操作同一个共享资源的时候&#xff0c;可能会出现业务安全问题。 2、实例&#xff1a;取钱的线程安全问题 2.1、场景 小明和小红是夫妻&#xff0c;他们有个共同账户&#xff0c;余额是十万元&#xff0c;如果两人同时取钱并且各自取…

vue3-10

动态路由与菜单 路由文件 a6router.ts import { createRouter, createWebHashHistory } from "vue-router"; import { useStorage } from "vueuse/core"; import { Route, Menu } from "../model/Model8080"; const clientRoutes [{path: &q…

nginx的一些命令

linux start nginx 开启 /usr/sbin/nginx&#xff08;直接启动&#xff09; nginx -s stop 停止 /usr/local/nginx/sbin/nginx -s stop nginx -s quit 安全停止&#xff0c;保存信息 nginx -s reload 当配置信息修改&#xff0c;需要重新载入这些配置时使用此命令 nginx -s re…

MATLAB|交叉折线图之间分色填充

目录 公众号 效果图 交叉折线图之间分色填充概念介绍 应用领域 优点 缺点

Linux内核--内存管理(二)物理内存分页机制

一、引言 二、物理内存模型 ------>2.1、平坦内存模型(Flat Memory Model) ------>2.2、对称多处理 SMP(Symmetric MultiProcessing) ------>2.3、非均衡访存模型 NUMA(Non-Uniform Memory Access) 三、节点、区域和页 ------>3.1、节点 ------>3.2、区域…

Python 安装mysqlclient 错误 无法打开包括文件: “mysql.h”: 解决方法

解决方案&#xff1a;python最新3.12.0不支持mysqlclient 请下载 python3.9.9 版本 高速下载地址CNPM Binaries Mirror 官方下载地址Welcome to Python.org 下载完成后将python添加到环境变量 pycharm 虚拟环境下的python版本切换到你刚才下载的3.9.9的python版本 Avai…

C#文件操作File类vsFileInfo类和Directory类vsDirectoryInfo类

目录 一、File类vsFileInfo类 1.File类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 2.FileInfo类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 二、 Directory类vsDirectoryInfo类 1.Directory类 &#xff08;…

FilterChain攻击解析及利用

文章目录 BASE64解码和编码原理浅析EncodingDecoding Filterchain构造&#xff08;原理阐述&#xff09;回顾死亡代码特性一&#xff08;双重去杂&#xff09;特性二&#xff08;粘合性&#xff09; 任意字符构造工具一工具二 实战例题[NSSRound#7 Team]brokenFilterChain&…

运维01:云计算

云计算的类型 分类&#xff1a;公有云、私有云、混合云 云计算的服务模式 服务模式分3种&#xff1a; ①IaaS&#xff08;Infrastructure as a Service&#xff09;&#xff1a;基础设施即服务 ②PaaS&#xff08;Platform as a Service&#xff09;&#xff1a;平台即服务…

Java并发编程

一、基础知识 1. 为什么要使用并发编程 提升多核CPU的利用率&#xff1a;一般来说一台主机上的会有多个CPU核心&#xff0c;我们可以创建多个线程&#xff0c;理论上讲操作系统可以将多个线程分配给不同的CPU去执行&#xff0c;每个CPU执行一个线程&#xff0c;这样就提高了CP…

Portraiture2024最新Photoshop磨皮插件更新啦

Portraiture是一款由Imagenomic公司研发的Photoshop磨皮插件。该插件以其优秀的磨皮效果&#xff0c;成为了众多摄影师和化妆师使用的首选插件。Portraiture主要用于影楼、婚纱、时尚摄影等各个领域。其主要特点是能够轻松地模拟人眼的视觉感受&#xff0c;自然地修饰人像照片。…

带头双向循环链表的实现

目录 认识带头双向循环链表 双向链表 循环链表 带头链表 带头双向循环链表 双向链表的优势和不足&#xff1a; 顺序表的优势和不足&#xff1a; 实现带头双向循环链表 创建带头双向循环链表 初始化 创建返回链表的头结点 打印链表 尾插 尾删 头插 头删 查找 在…

java小游戏之【王者荣耀】

首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 代码 package com.sxt;import javax.swing.*; import java.awt.*;public class Background extends GameObject {p…

android shape绘制半圆

<?xml version"1.0" encoding"utf-8"?><shape xmlns:android"http://schemas.android.com/apk/res/android"android:shape"rectangle"><sizeandroid:width"20dp"android:height"10dp" /><…

滑块验证码之模拟人工滑速

前言 代码直接运行即可 此处是用的selenium模拟&#xff0c;主要记录的难点是如何 模拟人工滑速 具体原理和利用到的东西都有做注释&#xff0c;逻辑完整&#xff0c;小白还是可以尝试理解的 一、正常简单模拟滑动 目标网址&#xff1a;点击 import base64 import time im…

【全栈开发】RedwoodJS与BlitzJS:全栈JavaScript元框架的未来

Redwood和Blitz是两个即将出现的全栈元框架&#xff0c;它们提供了创建SPAs、服务器端渲染页面和静态生成内容的工具&#xff0c;并提供了生成端到端支架的CLI。我一直在等待一个有价值的Rails JavaScript替代品&#xff0c;谁知道什么时候。这篇文章是对两者的概述&#xff0c…

参数估计(三)区间估计

文章目录 区间估计的概念一个正态总体的情形 μ \mu μ 的区间估计 σ 2 \sigma^2 σ2 的区间估计 两个正态总体的情形 μ 1 − μ 2 \mu_1-\mu_2 μ1​−μ2​ 的区间估计 σ 1 2 / σ 2 2 \sigma_1^2/\sigma_2^2 σ12​/σ22​ 的区间估计 参考文献 区间估计的概念 对未知参…