vue踩坑系列——计算属性

先贴源代码

<template>
	<div class="HCCI1-1-img">
		<img :src="imgsrc" alt="" class="HCCT1-1-imgImg" @click="clickImg">
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'topImg',
		data() {
			return {
				imgsrc: 'http://imgpb.hmjshop.com/img/sy_banner/App/shangcheng/banner222.png',
				index: 0
			}
		},
		methods: {
			clickImg: function(){
				this.index += 1;
			}
		},
		computed: {
			showIndex: function(){
				console.log(this.index);
			}
		}
	}
</script>

发现点击img元素时，并不能打印index的值

查阅官方文档得知，计算属性showIndex的函数是此属性的getter函数，只有在读取此属性时，才会执行该函数中的代码

如下，在clickImg中加入this.showIndex则可以打印成功

methods: {
	clickImg: function(){
		this.index += 1;
		this.showIndex;
	}
},

计算属性默认只有getter，不过在需要时也可以手动添加一个setter