先贴源代码
<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