Vue计算属性
对于任何包含响应式数据的复杂逻辑,都应该去使用计算属性(computed)。
示例:
<div id="app">
A:<input type="text" v-model="a"><br>
B:<input type="text" v-model="b"><br>
A+B:<span>{{ab}}</span><br>
A+B:<span>{{ab1}}</span>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
const vm = new Vue({
el: '#app',
data: {
a: 'A',
b: 'B'
},
methods: {
},
computed: {
ab:{
// 1.初次读取ab时,get就会被调用,返回值为ab的值,然后缓存起来
// 2.所依赖的数据发生变化时,也会调用get
get(){
console.log('get被调用了')
return this.a + '-' + this.b;
},
//当ab被修改时调用(vm.ab='xx')
set(value){
console.log('set',value)
}
},
//简写(当只有get时可简写)
ab1(){
console.log('简写get被调用了')
return this.a + '-' + this.b;
}
}
})
</script>