1.选项式写法
支持一个对象传入get函数,和set函数自定义操作
<el-input type="text" v-model="firstName"></el-input>
<br />
<br />
<el-input type="text" v-model="lastName"></el-input>
<br />
<br />
<div>{{ fullName }}</div>
<el-button @click="onChange">修改</el-button>
import { ref, computed } from "vue";
let firstName = ref("张");
let lastName = ref("三");
let fullName = computed({
get() {
return `${firstName.value}-${lastName.value}`;
},
set(newVal) {
[firstName.value, lastName.value] = newVal.split("-");
},
});
const onChange = () => {
fullName.value = "李-四";
};
2.函数式写法
只支持get,不能够进行set修改
let fullName = computed(() => `${firstName.value}-${lastName.value}`);