HBuilder X 中Vue.js基础使用3(三)

一、计算属性概念:

在Vue.js中,计算属性(computed properties)是一种核心特性,它允许开发者定义依赖于其他数据的复杂逻辑,并且能够在数据变化时自动更新。

二、计算属性特点:

  • 缓存性:计算属性会缓存依赖的数据,只有当依赖的数据发生变化时才会重新计算。如果多次访问该计算属性,Vue会直接返回缓存的结果,提高了性能。
  • 响应式:计算属性依赖的数据发生变化时,会自动重新计算,并更新绑定到该计算属性的视图。
  • 可读性:计算属性允许我们编写更清晰、可读性更高的代码,将复杂的逻辑封装在一个函数中,提高了可维护性。

三、计算属性的使用:

3.1 计算属性的读取/设置:
html 复制代码
<script setup>
import {ref,computed,reactive} from 'vue'

const firstName=ref('欧阳')
const lastName=ref('凌风')
const fullName=computed({
	//getter
	get(){
		return firstName.value+' '+lastName.value;
	},
	 
	//setter
	set(value){
		 // 注意:我们这里使用的是解构赋值语法
		 [firstName.value,lastName.value]=value.split(' ')
	}
})

</script>


<template>
	<div>
		  <h2> {{fullName}}</h2>
		  修改名字: <input v-model="fullName" />
		<hr/>
	</div>
</template>

3.2计算属性的应用场景

在Vue 3 中实际上已经**不再内置支持过滤器(filters)**功能,主要是利用计算属性(Computed Properties)、方法(Methods)或者自定义函数(Function)来处理数据。

使用计算属性(Computed Properties)

html 复制代码
<script setup>
import {ref,computed,reactive} from 'vue'

const oldData=ref('this is a test!')
// 使用计算属性进行数据处理
const newData=computed(()=>{
	//将数据转换为大写
	return oldData.value.split('').join('-').toUpperCase();
});


<template>
	<div>
		<span>{{oldData}} <br/><br/>
		   {{newData}}
		</span>
</template>

使用方法(Methods)

html 复制代码
<script setup>
import {ref,computed,reactive} from 'vue'

const inputData=ref('')
const afterData=ref('')
const handleInput = () => {
	 // 数据处理逻辑
	 afterData.value=inputData.value.toUpperCase();
};
</script>

<template>
	<div>
		 <input v-model="inputData" @input="handleInput" />
		 {{ afterData }}
		<p></p>
</template>

自定义函数

html 复制代码
<template>
	<div>
		{{oData}} => {{eData}}
    </div>

</template>
相关推荐
UI设计和前端开发从业者4 分钟前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子31 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js