首页 > 其他分享 > Vue3+.net6.0 四 计算属性 computed

Vue3+.net6.0 四 计算属性 computed

时间:2023-07-11 11:48:06浏览次数:46  
标签:computed methods +. persons 计算 Vue3 属性

跟Vue2一样,我们在工作中使用data中的属性时,很多时候不是直接拿来用,而是要经过一些计算,判断,筛选的过程。

比如一个数组,我们可能在使用前要判断 有没有元素,是否包含某个元素,然后根据不同的情况有不同的展示方式,这些如果都写在html部分,会非常不好阅读,如果多个地方要做类似的判断,则会大大增加代码量和维护难度。

因此,我们可以使用计算属性。

写法和用法跟methods一样。

        computed:{
            checkList(){
                return this.persons.length>0;
            }
        }
 <p v-if="checkList">有数据!</p>

当persons属性发生改变后,会监测到checkList计算属性依赖persons,因此会同步更新。

 

跟vue2一样,我们使用methods,在里面定义一个方法,也可以实现相同的功能。

这里再强调一下computed和methods的异同:当多次请求时,如果computed依赖的属性值没有变化,那么不需要重新计算,而是读取缓存,性能更高,而methods总是会在重新渲染时再次执行。

在我们使用计算属性时,通常强调只做计算,而不做异步或者更改dom。我们只应当通过计算属性的声明去根据其他属性的值来得出一个新的值,也就是单纯的计算和返回。

题外话,在实际操作中,很多计算属性的功能都被方法包含了......

 

标签:computed,methods,+.,persons,计算,Vue3,属性
From: https://www.cnblogs.com/luyShare/p/17544184.html

相关文章

  • vue3中父组件与组件之间参数传递,使用(defineProps/defineEmits),涉及属性传递,对象传递,
    Vue3中子父组件之间的通信一、父组件传递参数到子组件采用defineProps传递属性父组件:<template><div><h1>这是父组件</h1><h1>父组件像子组件传递参数</h1><h2>传递属性值</h2><HH:fatherMessage="fatherMessage":valNum="valNum":valBool=......
  • Vue3+.net6.0 三 响应式基础,methods
    这里的示例都用选项式风格在Vue3中,数据是基于 JavaScriptProxy(代理) 实现响应式的。这个示例中输出是false,因为当你在赋值后再访问 this.someObj,此值已经是原来的 newObj 的一个响应式代理。需要注意的是newObj 并不会变成响应式。<scripttype="module">const......
  • 前端编程开发 --- vue3 监听属性
    监听变量的变化并触发函数 <divid="app"><pstyle="font-size:25px;">计数器:{{counter}}</p><button@click="counter++"style="font-size:25px;">点我</button>//counter++表示变量自增......
  • vue(九)vue3新特性
    vue3六大亮点:性能比Vue2强可以将无用模块去掉,仅打包需要的组合API碎片(fragment),portal传送门(teleport),悬念(suspense)更好的TS支持暴露了自定义渲染APIsetup()在setup函数中声明对象,代替data()。ref声明简单对象,reactive声明复杂对象。<template><h3>{......
  • Vue3 的 hook函数
    Vue3的hook函数相当于vue2的mixin,不同在于hooks是函数;Vue3的hook函数可以帮助我们提高代码的复用性,让我们能在不同的组件中都利用hooks函数;其实就是代码的复用,可以用到外部的数据,生命钩子函数...,具体怎么用直接看代码,//一般都是建一个hooks文件夹,都写在里面impor......
  • vue3封装echarts组件数据更新不同步问题
    vue3封装echarts组件数据更新不同步问题背景:​ 记录一下项目中遇到的bug,在vue3+echarts环境下,为了方便使用,我将echarts封装成组件使用,使用的时候只需要把对应的值传入给chart组件就行,但是在传入真实数据的时候遇到了问题,就是传入value值与图表组件显示的数值不一致。(如图)......
  • vue--day13--watch与computed的区别
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch实现名字案例</title><scri......
  • computed计算属性
    <template><!--vue3组件中的模板结构可以没有根标签--><h1>一个人的信息</h1>姓:<inputtype="text"v-model="person.firstName"><br>名:<inputtype="text"v-model="person.lastName"><br>......
  • 创建Vue3.0工程
    使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_test##启动cdvue_testnpmr......
  • Java技术分享:SpringBoot+mysql+...
    放个效果图: 准备项目首先在MySql控制台输入一下sql语句创建student数据库和student。createdatabsestudent;usestudent;CREATETABLE`student`(`stu_id`bigint(20)NOTNULL,`stu_name`varchar(45)DEFAULTNULL,`stu_sex`varchar(6)DEFAULTNUL......