vue3 Computed中get 和set
vue3 computed中get和set1.getvue3中计算属性的函数中如果只传入一个回调函数,表示的是get<template><div class="main"><div><input type="text" v-model="userName.oneName" /><input type="text" v-model="userNa
·
vue3 computed中get和set
1.get
vue3中计算属性的函数中如果只传入一个回调函数,表示的是get
<template>
<div class="main">
<div>
<input type="text" v-model="userName.oneName" />
<input type="text" v-model="userName.twoName" />
</div>
<h1>计算属性</h1>
<div>
<input type="text" v-model="changeOneName" />
</div>
</div>
</template>
<script>
import { computed, reactive } from "vue";
export default {
setup() {
const userName = reactive({
oneName: "张荣寒",
twoName: "李月",
});
// vue3中计算属性的函数中如果只传入一个回调函数,表示的是get
const changeOneName = computed(() => {
return userName.oneName + "我是get";
});
return {
userName,
changeOneName,
};
},
};
</script>
2.set
vue3中计算属性的函数中如果传入一个对象,表示的是get和set
<template>
<div class="main">
<div>
<input type="text" v-model="userName.twoName" />
</div>
<h1>计算属性</h1>
<div>
<input type="text" v-model="changeTwoName" />
</div>
</div>
</template>
<script>
import { computed, reactive } from "vue";
export default {
setup() {
const userName = reactive({
twoName: "李月",
});
// vue3中计算属性的函数中如果传入一个对象,表示的是get和set
const changeTwoName = computed({
get() {
return userName.twoName;
},
set(val) {
console.log(val);
let name = val.split("_");
userName.twoName = name;
},
});
return {
userName,
changeTwoName,
};
},
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)