vue学习笔记 十一、计算属性介绍

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、效果：

点击“add”按钮后

二、项目结构截图

三、代码

关键位置：引入的计算属性

import {defineComponent,computed,ref} from 'vue'

<template>
	<div>
		<div>
			{{num1}}-----{{num2}}
			两个数的和：{{addNum}}
		</div>
		<div>
			<button @click="add">add</button>
		</div>
	</div>
</template>

<script>
//编写js内容

import {defineComponent,computed,ref} from 'vue'

export default defineComponent({
	name:'Home',
	components:{

	},
	setup(){
		let num1 = ref(10)
		let num2 = ref(20)
		let addNum = computed(()=>{
			//必须返回一个值
			//逻辑代码
			return num1.value + num2.value
		})
		let add = () =>{
			num1.value ++
			num2.value ++
		}
		return{
			num1,
			num2,
			addNum,
			add
		}
	}
})

</script>

<style scoped lang="scss">
</style>