7、computed计算属性使用
代码
Student.vue
<template>
<div>
<h2>computed计算属性使用</h2>
<input type="text" v-model="name"/><br/>
<input type="text" v-model="sex"/><br/>
完整信息：{{info}}<br/>
<button @click="changeInfo">修改info</button>
</div>
</template>
<script setup lang="ts" name="Student">
import { ref,computed } from 'vue';
let name=ref('zhangsan')
let sex=ref('男')
let info=computed({
get(){
console.log('get()方法执行了')
return name.value+'-'+sex.value
},
set(val){
console.log('set()方法执行了')
name.value = val.split('-')[0]
sex.value = val.split('-')[1]
}
})
function changeInfo(){
info.value = 'Wang-女'
}
</script>
<style scoped>
</style>什么时候执行get()方法
计算属性依赖的name.value或sex.value中的其中一个值发生改变，就会执行get()方法。
什么时候执行set()方法
属性值let info=computed，info发生变化执行set（）方法。