vue中v-model绑定计算属性

使用场景

v-model本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；通常情况下v-model绑定的都是data属性中声明的变量，但是处理这些变量外，怎么绑定计算属性呢？

什么是计算属性

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。说白了就是，一个变量的值, 需要用另外变量计算而得来。

假设现在有个设置语言的功能，需要同时保存中英文数据，这个该如何实现？

通过普通方法实现

如果通过多个输入框实现，就不需要那么复杂，如下图，完整代码：

<template><section><el-form ref="formInfo" :model="formInfo" label-width="80px"><el-form-item label="选择语言"><el-checkbox-group v-model="formInfo.lang"><el-checkbox label="中文" value="cn" name="type"></el-checkbox><el-checkbox label="英文" value="en" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="名称-中文"><el-input v-model="formInfo.name.cn"></el-input></el-form-item><el-form-item label="名称-英文"><el-input v-model="formInfo.name.en"></el-input></el-form-item></el-form></section>
</template><script>
export default {data() {return {// 表单信息formInfo: {lang: ["cn", "en"],name: {cn: "",en: "",},},};},
};
</script>

通过计算属性

接下来我们看一下通过一个输入框和计算属性如何实现？如下图，完整代码：在线运行

<template><section><el-form ref="formInfo" :model="formInfo" label-width="80px"><el-form-item label="选择语言"><el-select v-model="formInfo.langSel" placeholder="请选择"><el-option key="cn" label="中文" value="cn"> </el-option><el-option key="en" label="英文" value="en"> </el-option></el-select></el-form-item><el-form-item label="名称"><el-input v-model="getLangName"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button></el-form-item></el-form></section>
</template><script>
export default {data() {return {formInfo: {langSel: "cn",name: {cn: "",en: "",},},};},computed: {// 双向绑定简介getLangName: {get() {// 获取值return this.formInfo.name[this.formInfo.langSel];},set(val) {// 设置新值this.formInfo.name[this.formInfo.langSel] = val;},},},methods: {onSubmit() {console.log("submit!", this.formInfo);},},
};
</script>