Vue.js常见的选项属性——计算属性computed

最新推荐文章于 2023-12-14 16:00:45 发布

大口喝脉动

最新推荐文章于 2023-12-14 16:00:45 发布

阅读量855

点赞数

分类专栏： Vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_48683341/article/details/118528490

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

computed是一个选项属性，需要书写成一个对象格式，内部写成函数格式。

	<body>
		<div id="app">
			{{i}}
			<!-- 给按钮绑定一个事件，用来改变i值 -->
			<button type="button" @click="i++">+</button>
			<!-- 改变数据再进行渲染对比 -->
			<button @click="str='2021-11-11'">更新日期</button>
			<hr >
			{{str}}
			<!-- 通过用方法和计算属性来渲染日期，进行对比 -->
			<div>{{parseTime()}}</div>
			<div>{{getTime}}</div>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					str: '2021-7-6',
					i: 0,
					obj: {}
				},
				computed:{
					getTime(){
						console.log('getTime....计算属性')
						let s = this.str
						let arry = s.split('-')
						return `${arry[0]}年${arry[1]}月${arry[2]}日`
					}
				},
				methods:{
					parseTime(){
						console.log('parseTime....方法')
						let s = this.str
						let arry = s.split('-')
						// this.obj.a = 1 //此处添加的属性是非响应式的
						return `${arry[0]}年${arry[1]}月${arry[2]}日`
					}
				}
			})
		</script>
	</body>

方法在每次调用的时候都会执行一次，方法不会进行缓存；

而计算属性会把计算结果进行缓存，只要str值不发生改变，计算属性就会把第一次的值进行返回。

大口喝脉动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js常见的选项属性——计算属性computed

计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。computed是一个选项属性，需要书写成一个对象格式，内部写成函数格式。 <body> <div id="app"> {{i}}  <button type="button" @click="i++">+
复制链接

扫一扫