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>
前端工程师
粉丝
