首页 > 其他分享 >组合式api-计算属性computed的使用

组合式api-计算属性computed的使用

时间:2023-08-12 15:23:38浏览次数:38  
标签:组合式 arr computed value item api vue2 属性

计算属性在vue3中和vue2的思想概念都是一样,唯一区别就是在使用组合式api时候的语法稍有不同。

使用步骤:

  • 导入computed函数
    • import {computed} from 'vue'
  • 使用computed函数
<script setup>
import {computed, ref} from "vue";

const arr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

// 使用computed函数包装并返回计算属性的值
const arrDouble = computed(() => {
  // 返回arr每项值double后的数组
  return arr.value.map(item => item * 2)
})

/**
 * 和vue2一样,computed计算属性默认只是get获取,如果在特殊场景,比如:全选的时候可以使用set。
 可以看回vue2的一个小案例:https://www.wolai.com/8CGg1wzH7tpySSXM9TVTs3#bb3hLYDtLoC3Bwbet3Kba5
 */
const isAllChecked = computed({
  get(){
    return arr.value.every(item=>item>1)
  },
  set(value){
    console.log(value);
  }
</script>

<template>
  <div>
    <p>arr: {{ arr }}</p>
    <p>arrDouble: {{ arrDouble }}</p>
  </div>
</template>

标签:组合式,arr,computed,value,item,api,vue2,属性
From: https://www.cnblogs.com/juelian/p/17624850.html

相关文章

  • 组合式api-ref引用子组件、dom元素, defineExpose的使用
    和vue2一样,我们有时候希望父组件能够调用子组件中的方法、属性。那么就要用到ref。然后你会发现,根本调用不了子组件中的方法"sonSayHi",如下图:原因:使用......
  • 组合式api-子父组件之间通信props和emit
    整体来说和vue2也是比较相似的。使用props传递数据到子组件父组件给定数据。子组件中使用defineProps来接收父组件传递的数据。子组件emit触发事件通知父组件思想和vue2完全一致.....父组件:<scriptsetup>importSonAfrom"@/compon/SonA.vue";import{ref}from......
  • 组合式api-跨层级组件通信provide和inject
    vue2的provide和inject:https://v2.cn.vuejs.org/v2/api/#provide-inject主要作用:跨层级传递数据(响应和非相应数据都可以)、方法(函数),顶层可以跨N层传递数据和方法给子孙组件调用。使用provide和inject可以在不太复杂的场景下,不使用状态管理(vuex、pinia)来解决组件通信问题。使用p......
  • 细谈商品详情API接口设计
    当我们构建电商网站或应用时,常常需要获取淘宝商品的详细信息。为了实现这个功能,我们可以利用淘宝提供的开放平台API接口来获取商品数据。在这篇文章中,我们将学习如何设计一个商品详情API接口,并提供相应的代码示例。首先,我们需要注册淘宝开放平台账号,并创建一个新的应用来获取API访......
  • 细谈商品详情API接口设计
    当我们构建电商网站或应用时,常常需要获取淘宝商品的详细信息。为了实现这个功能,我们可以利用淘宝提供的开放平台API接口来获取商品数据。在这篇文章中,我们将学习如何设计一个商品详情API接口,并提供相应的代码示例。首先,我们需要注册淘宝开放平台账号,并创建一个新的应用来获取API......
  • go项目实现mysql接入以及web api
    创建go项目,并在go项目中接入mysql,将mysql的配置项单独整理放到一个胚子和文件中,支持项目启动时,通过加载配置文件中的值,然后创建数据库连接。之后使用net/http相关的库,创建路由,并在路由中通过不同的http方法,实现mysql连接的test数据库中users表的增删改查的webapi1.在ide......
  • 一文详解Apipost数据模型功能
    在Apipost数据模型中用户可以预先创建多个数据模型,并在API设计过程中重复利用这些模型来构建API创建数据模型在左侧导航点击「数据模型」-「新建数据模型」在右侧工作台配置数据模型参数引入数据模型在API设计预定义响应期望下点击引用数据模型,并选择需要导入的数据模型即可将创建......
  • 常用类和基础API(二)
    1、在jdk8.0之前的日期时间的使用1.1、常用方法:longbegin=System.currentTimeMillis();//获取当前系统时间对应的毫秒值Datedate=newDate();System.out.println(date); //获取当前时间和日期1.2、SimpleDateFormat:用于日期时间的格式化和解析......
  • python调用zabbix api接口实时展示数据
    zabbixapi接口来进行展示。经过思考之后,计划获取如下内容:  1、  获得认证密钥  2、  获取zabbix所有的主机组  3、  获取单个组下的所有主机  4、  获取某个主机下的所有监控项  5、  获取某个监控项的历史数据  6、  获取某个监控项的......
  • 商品详情接口设计:使用API调用获取淘宝商品数据的完整方案
    在如今的电商时代,获取商品的详细信息是实现商业化应用的基础。本文将详细介绍如何通过API调用来获取淘宝商品数据,并提供一个完整的商品详情接口设计方案,包括代码示例。开发人员可以根据此方案快速实现商品详情功能,提升用户体验。准备工作:在开始之前,我们需要确保已经申请并获得淘宝......