当前位置: 首页 > news >正文

vue computed计算属性

模板中的表达式虽然方便,但也只能用来做简单的操作;如果在模板中写太多逻辑,会让模板变得臃肿,难以维护;因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑
1. 选项式 API 中,可以提供computed选项来声明计算属性
2. 组合式 API 中,可以通过computed回调函数返回的值来声明计算属性

计算属性与方法的区别:
●两种方式在结果上确实是完全相同的,不同之处在于计算属性值会基于其响应式依赖被缓存。
●一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变,无论多少次访问计算属性都会立即返回先前的计算结果,而不用重复执行getter函数。
●方法调用总是会在重新渲染发生时再次执行函数。

计算属性注意事项:
●不要在计算函数中做异步请求或者更改DOM
●避免直接修改计算属性值 

选项式代码示例:

<script>
export default {data: () => ({age: 20, // 年龄birthday: '' // 生日}),// 计算属性选项computed: {// 年龄阶段ageState() {if (this.age < 18) {return '未成年'} else if (this.age < 35) {return '青年'} else if (this.age < 50) {return '中年'} else {return '老年'}},// 星座constellation() {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = this.birthday.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判断switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '双鱼座'}case 3:if (day <= 20) {return '双鱼座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '双子座'}case 6:if (day <= 21) {return '双子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '狮子座'}case 8:if (day <= 22) {return '狮子座'} else {return '处女座'}case 9:if (day <= 22) {return '处女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '请选择日期'}}}
}
</script><template><div>年龄:<input type="number" v-model.lazy="age"><!-- 简单的表达式 --><h3>年龄阶段(简单):{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 计算属性:年龄阶段 --><h3>年龄阶段(复杂):{{ ageState }} </h3></div><hr><div>生日:<input type="date" v-model="birthday"><!-- 计算属性:星座 --><h3>星座:{{ constellation }}</h3></div></template>

组合式代码示例:

<script setup>
import { computed, ref } from 'vue'let age = ref(20) // 年龄// 计算属性:年龄阶段
let ageState = computed(() => {if (age.value < 18) {return '未成年'} else if (age.value < 35) {return '青年'} else if (age.value < 50) {return '中年'} else {return '老年'}
})let birthday = ref('') // 生日// 计算属性:星座
let constellation = computed(() => {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = birthday.value.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判断switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '双鱼座'}case 3:if (day <= 20) {return '双鱼座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '双子座'}case 6:if (day <= 21) {return '双子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '狮子座'}case 8:if (day <= 22) {return '狮子座'} else {return '处女座'}case 9:if (day <= 22) {return '处女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '请选择日期'}
})
</script><template><div>年龄:<input type="number" v-model.lazy="age"><!-- 简单的表达式 --><h3>年龄阶段(简单):{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 计算属性 --><h3>年龄阶段(复杂):{{ ageState }} </h3></div><hr><div>生日:<input type="date" v-model="birthday"><h3>星座:{{ constellation }}</h3></div>
</template>

 

 

http://www.lryc.cn/news/312501.html

相关文章:

  • 智慧路灯物联网管理平台及应用
  • 基于OpenCV的图形分析辨认02
  • python基础——基础语法
  • vue3 vue-i18n 多语言
  • 二级水平导航菜单栏的实现
  • 在GitLab Python库中,mr.changes()和mr.diffs()的区别
  • JavaScript | 【讨论】微软早在2022年已经停用ie的今天,js开发还需要考虑ie9以下的情况嘛?
  • 网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)
  • 英福康INFICON软件真空Tware32中文操作手册
  • UnityAPI的学习——Quaternion类
  • chromedriverUnable to obtain driver for chrome using ,selenium找不到chromedriver
  • 剑指offer面试算法题目,自己总结的
  • 原生IP是什么?如何测试代理是不是原生IP?
  • 1、MQ_介绍、优缺点、类型等
  • Go-gin-example 第三部分 编写一个简单的文件日志系统
  • SQL中如何添加数据
  • 如何更好的理解设计模式之桥接模式
  • 归并排序
  • ELF 1技术贴|在NXP源码基础上适配开发板的按键功能
  • Linux:kubernetes(k8s)pod的基础操作(6)
  • 【Docker】掌握 Docker 镜像操作:从基础到进阶
  • flink重温笔记(十一):Flink 高级 API 开发——flink 四大基石之 Checkpoint(详解存储后端)
  • React富文本编辑器开发(九)位置
  • 一次直播和图像识别技术应用的探索之旅
  • Ubuntu 下使用 Pybind11 实现 C++ 调用 Python 接口的示例
  • docker安装和使用kafka
  • CTP-API开发系列之接口对接准备
  • C++小记 -链表
  • 网络协议学习DAY1
  • vue3中全局变量的定义和获取