vue computed 计算属性
用于解决在模板种复杂的逻辑问题
比较适合多个变量的改变返回一个数据值的情况
计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值
计算属性默认只有 getter,不过在需要时也可以提供一个 setter
1. 简单用法
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: 'ComputedNote',
data() {
return {
first: '第一个参数',
second: '第二个参数'
}
},
computed: {
count() {
return this.first + '-' + this.second
}
}
}
</script>
2. 复杂用法 ( getter , setter )
<template>
<div>
<input type="text" v-model="count" />
</div>
</template>
<script>
export default {
name: 'ComputedNote',
data() {
return {
first: '第一个参数',
second: '第二个参数'
}
},
computed: {
count: {
get() {
return this.first + '-' + this.second
},
set(val) {
const _v = val.split('-')
this.first = _v?.[0] || ''
this.second = _v?.[1] || ''
}
}
}
}
</script>