• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 5小时前 1次浏览

一、效果:

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

 

 点击“add”按钮后

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

 

 

二、项目结构截图

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

 

三、代码

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

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>

 


程序员灯塔
转载请注明原文链接:vue学习笔记 十一、计算属性介绍
喜欢 (0)