首页 > 其他分享 >uni-app的计算属性

uni-app的计算属性

时间:2024-09-04 09:21:10浏览次数:7  
标签:computed app value 添加 计算 uni 我们 属性

计算属性,也就是使用2个或者两个以上的值来计算或者组合

首先我们先写两个输入框然后写一个框的组合:

方法(1):方法(2):就是使用官方给的一个是属性 computed   

 使用 computed 时需要注意的是,在模板成需要在变量后面添加 value   否者会直接把源码显示上去

方法(3):大家仔细看一下通过 computed 编写的代码是不是与 function 编写的代码很相识呢

这个编写出问题的原因就是因为我们在上面,没有为 numFun 后面添加小括号,因为他是一个方法而不是变量,所以我们需要为他添加括号 

这个方法的代码因为一有一个返回,没有太大代码,所以我们可以简写一下:

方法(2)与方法(3)的对比,官方也说的很明确了,就是因为计算属性是有缓存的,方法呢就是你调用多少次就用会使用多少次;

接下来我们通过之前写的来编写和了解计算属性,找到这个页面然后计算你选中的物品的价格之合: 

因为 checkBox 标签,他不能知道你选择了那个物品所以我们去官网找一下 也就看到了 

checkbox-group 标签,在这个标签中我们需要为他设置唯一值才可以使用,但是唯一值需要是String(字符串) , 所以我们需要将数组的 id 修改一下:

因为我看他的名称也是唯一值所以我设置的是  :value=" item.name ",你们可以为他设置为 

:value=" item.id " 就可以使用了 ,然后在给他赋予了属性 @change 后可以对点击做出反应;

有了反应后我们可以对他进行计算先为他添加语句,

然后我们看看控制台的,回应数组;

选择一个他就会输出 一个 Array(1) 两个就是  Array(2) 之后以此类推;上面我们给他写了一个    <view>共选择 {{count}} 个产品,共计  元</view>  我们给他们添加值的时候就需要重新写一个数组并给他赋值;

也可以写个变量 :

const numCount = computed(()=>arr2.value.length);在到上面修改为 {{numCount}}

我们想要计算总数时,需要为他在添加一个数组属性,告诉他,他有没有被选择上;

在编写点击后的赋值就好了

通过这个代码就可以实现点击后计算了

标签:computed,app,value,添加,计算,uni,我们,属性
From: https://blog.csdn.net/All_lost/article/details/141865174

相关文章

  • The 2023 ICPC Asia Nanjing Regional Contest (The 2nd Universal Cup. Stage 11: Na
    C-PrimitiveRoot题意给定p与m(p为质数),已知(g^(P-1))%P==1且g<=m。求g的个数。思路由(g^(P-1))%P==1与异或性质a-b<=a^b<=a+b,可以推出g=((k*p+1)^(p-1))与p*(k-1)+2<=g<=p*(k+1)。又因为g<=m,则当p*(k+1)<=......
  • 【Azure App Service】App service无法使用的情况分析
    问题描述Appservice无法使用,返回500错误或一直没有响应的情况。 问题原因AppService集成子网后,如果子网网段中的剩余IP地址非常少的情况下,会在AppService实例升级时(先加入新实例,然后在移除老实例)。新加入的实例不能被分配到正确的内网IP地址,无法成功的访问内网资源。......
  • Go - Web application 3
    Displayingdynamicdatafunc(app*application)snippetView(whttp.ResponseWriter,r*http.Request){id,err:=strconv.Atoi(r.PathValue("id"))iferr!=nil||id<1{http.NotFound(w,r)return}snippet,......
  • 基因图谱(Genomic Mapping)分析与应用
    基因图谱(GenomicMapping)是基因组学研究中一项至关重要的技术,它为科学家提供了关于基因的位置和距离的详细信息。通过基因图谱的构建,研究人员可以揭示基因与性状之间的关系,探索疾病的遗传机制,并推动个性化医学的发展。本文将详细分析基因图谱的类型、构建方法、应用场景以及它......
  • 国内外主流服务器管理面板 AMH、AppNode、WDAP、宝塔
    一.AMH1.AMH国内领先的云主机面板,安装请使用纯净系统。(Centos、Debian、Ubuntu)二.AppNode1.可视化、简易高效、操作透明、高可扩展三.WDAP1.可视化四.宝塔1.可视化......
  • uniapp 复制编译后sourcemap复制到工程内
    sourcemap.jsconstfs=require('fs');constpath=require('path');/***将/dist/dev/.sourcemap文件复制到/dist/dev/mp-toutiao/.sourcemap*/lettriggerMove=false;module.exports=async()=>{if(triggerMove)return;tri......
  • 通俗解读大模型微调(Fine Tuning)
    前言我们对技术的理解,要比技术本身更加重要。大模型会成为AI时代的一项基础设施。作为像水、电一样的基础设施,预训练大模型这样的艰巨任务,只会有少数技术实力强、财力雄厚的公司去做。绝大多数人,是水、电的应用者。对这部分人来说,掌握如何用好大模型的技术,更加重要。用好大模型的第......
  • 某税务app登录接口逆向--获取长效ck
    某税务app登录接口逆向–获取长效ck前言:之前分析了web版本的登录接口,各参数都很简单。有朋友私信我说app登录有意外惊喜,俺们做学术研究的不就是喜欢发掘惊喜么,鉴于此有了此文分析一、目的​1.1、实现完整登录接口(账号登录、短信登录)​1.2、实现免短信登录接口​......
  • uniapp+uView幸运大转盘
    父组件代码:<template>  <viewclass="almost-lottery":class="popupShow2?'mask':''">    <view class="d-content">      <viewclass="almost-lottery__wheel">  ......
  • 星图云开源APP新手入门教程,一分钟GET源码!
    星图云APP开源项目介绍:本项目是一个开源的移动应用开发模版,旨在帮助人们快速搭建一个具备数字地球基本功能的应用程序,并根据自己的需求进行定制和扩展。它提供了地图基本功能和其他常见的开发模块,使开发过程更加高效和便捷。功能特性:○地图展示:集成了数字地球功能,提供地图展示......