Vue23的计算属性(computed)

news/2024/11/14 12:11:31/

Vue2&3的计算属性(computed)

Vue2的计算属性

  • 原理:data中的属性通过计算得到新的属性,称为计算属性(computed)。
  • computed 具有 getter 和 setter 属性
    • getter 属性在使用时分别有两次调用:
      • 第一次:初始化,初次访问该属性
      • 第二次:当 computed 中的数据发生变化时调用
    • setter 属性的调用:
      • 当 computed 属性被修改时调用
    • 注意事项:
      • setter 属性本身不会修改属性的值,只用于修改属性本身,而 computed 属性的值被修改并不会更新setter 属性的值。
      • getter 和 setter 属性不能使用箭头函数,箭头函数中的this不是指向vm,而是window。
  • computed 分别有两种写法:
    • 简写形式:computed : { 属性名(){ ...... } },不使用setter属性时,才能使用
    • 完整形式:computed : { 属性名 : { get(){ ...... }, set(value){ ...... } } }
// App.vue
<template>姓名:<input type="text" v-model="username"><br>反转:<input type="text" v-model="reversedName">
</template><script>export default {name : 'App',data(){return {username : ''}},computed : {// 完整写法reversedName : {get(){return this.username.split('').reverse().join('')},set(value){this.username = value.split('').reverse().join('')}}// 简写形式reversedName(){return this.username.split('').reverse().join('')}}}
</script>

Vue3的计算属性

  • Vue3的 computed 属性是一个组合式API,并且可以使用箭头函数
  • 使用前需要先引入:import { computed } from 'vue'
  • computed 属性的两种写法:
    • 简写形式:computed(() => { ...... }),不使用setter属性时,才能使用
    • 完整形式:computed({get(){ ...... }, set(value){ ...... }})
// App.vue
<template>姓名:<input type="text" v-model="user.name"><br>反转:<input type="text" v-model="reversedName">
</template><script>import { reactive, computed } from 'vue'export default {name : 'App',setup(){let user = reactive({name : ''})// 简写写法let reversedName = computed(() => {return user.name.split('').reverse().join('')})// 完整写法let reversedName = computed({get(){return user.name.split('').reverse().join('')},set(value){user.name = value.split('').reverse().join('')}})return {user, reversedName}}}
</script>

http://www.ppmy.cn/news/1229981.html

相关文章

ts 联合react 实现ajax的封装,refreshtoken的功能

react ts混合双打&#xff0c;实现ajax的封装&#xff0c;以及401的特殊处理 import axios from axios import {AMDIN_EXPIRES_KEY,AMDIN_KEY,AMDIN_REFRESH_EXPIRES_KEY,AMDIN_REFRESH_KEY,COMMID_KEY,getToken,removeToken } from ../utils/user-token import { showMessage…

力扣-414.第三大的数(两种解法)

文章目录 第三大的数解法一&#xff08;排序加遍历对比&#xff09;解法二&#xff08;遍历一遍加迭代&#xff09; 第三大的数 题目&#xff1a; 给你一个非空数组&#xff0c;返回此数组中第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 示例 1&#xff1a; 输…

【双指针】快乐数

快乐数 文章目录 快乐数01 题目详细02 算法原理快慢指针 03 代码Java代码;C代码 01 题目详细 202. 快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这…

STM32获取最大堆栈空间

参考 stackflow相关讨论 原理 通过参考链接&#xff0c;可知探测Stack的最大深度是先在stack中填充不常用的特定值&#xff0c;然后实时检测这些值哪些发生了变化&#xff0c;变化的表示使用到了这个空间&#xff0c;如果程序完全遍历后&#xff0c;有些值还是没变&#xff…

Hibernate 函数 ,子查询 和原生SQL查询

一. 函数 聚合函数&#xff1a;count(),avg(),sum(),min(),max() 例&#xff1a;&#xff08;1&#xff09;查询Dept表中的所有的记录条数。 String hql" select count(*) from Dept "; Long count(Long)session.createQuery(hql).uniqueResult(); 当不确定返回的是…

IObit Unlocker丨解除占用程序软件

更多内容请收藏&#xff1a;https://rwx.tza-3.xyz 官网&#xff1a;IObit Unlocker “永远不用担心电脑上无法删除的文件。” 界面简单&#xff0c;支持简体中文&#xff0c;一看就会&#xff0c;只需要把无法删除/移动的文件或整个U盘拖到框里就行。 解锁率很高&#xff0c;…

PC3329L DC-DC降压 10V-100V输入3A大流输出带EN功能实现零功耗只需极少元器件

1. PC3392L特性  通过使能脚关断实现零功耗  宽电压输入范围 10V 至 100V  最大输出电流 3A  集成功率 MOS 管  外围器件少  输出短路保护  温度保护  逐周期限流  输出电压灵活可靠  ESOP8 2. 描述 PC3392L 一款宽电压范围降压型 DC-DC 电源管…

HTTP四种请求方式,状态码,请求和响应报文

1.get请求 一般用于获取数据请求参数在URL后面请求参数的大小有限制 2.post请求 一般用于修改数据提交的数据在请求体中提交数据的大小没有限制 3.put请求 一般用于添加数据 4.delete请求 一般用于删除数据 5.一次完整的http请求过程 域名解析&#xff1a;使用DNS协议…