网站开发经理,ipv6可以做网站吗,爱站工具的功能,建设网站要做的工作内容模板中的表达式虽然方便#xff0c;但也只能用来做简单的操作#xff1b;如果在模板中写太多逻辑#xff0c;会让模板变得臃肿#xff0c;难以维护#xff1b;因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑 1. 选项式 API 中#xff0c;可以提供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 请选择日期}}}
}
/scripttemplatediv年龄input typenumber v-model.lazyage!-- 简单的表达式 --h3年龄阶段简单{{ age 18 ? 未成年 : 成年 }} /h3!-- 计算属性年龄阶段 --h3年龄阶段复杂{{ ageState }} /h3/divhrdiv生日input typedate v-modelbirthday!-- 计算属性星座 --h3星座{{ constellation }}/h3/div/template
组合式代码示例
script setup
import { computed, ref } from vuelet 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 请选择日期}
})
/scripttemplatediv年龄input typenumber v-model.lazyage!-- 简单的表达式 --h3年龄阶段简单{{ age 18 ? 未成年 : 成年 }} /h3!-- 计算属性 --h3年龄阶段复杂{{ ageState }} /h3/divhrdiv生日input typedate v-modelbirthdayh3星座{{ constellation }}/h3/div
/template
