getter 读调用
setter 写调用
计算属性的 setter
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter
getter的使用,如下:
<template>
<div class="page">
<p>{{firstName}}</p>
<p>{{lastName}}</p>
<p>{{fullName}}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName: { //仅读
get: function() {
return this.firstName + ' ' + this.lastName
}
}
}
}
</script>
setter的使用,如下:
<template>
<div class="page">
<ul>
<li v-for='(item,index) in tableData' :class='{activeClass:currentIndex == index}' @click='changeCurrent(index)'>
第{{item.id}}个:{{item.title}}
</li>
</ul>
<h5>选中的标题:{{currentTitle}}</h5>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
title: 'title1',
},
{
id: 2,
title: 'title2'
},
{
id: 3,
title: 'title3'
}
],
currentIndex: 0
}
},
//计算属性
computed: {
currentTitle: {
// getter 读调用
get: function() {
console.log('getter666')
return this.tableData[this.currentIndex].title;
},
// setter 写调用
set: function(index) {
console.log('setter666')
this.currentIndex = index;
}
}
},
methods: {
changeCurrent(index) {
this.currentTitle = index;
}
}
}
</script>
<style>
.page {
margin: 20px;
}
ul li {
list-style: none;
cursor: pointer;
line-height: 30px;
}
.activeClass,
h5 {
color: red;
}
</style>