Element Plus v-model 指令详解：轻松实现表单双向绑定

Element Plus 的 v-model 是一种 Vue.js 指令，用于在表单元素中创建双向绑定。它允许将表单元素的值与 Vue 实例的数据属性绑定在一起，这样当表单元素的值发生变化时，Vue 实例中的数据属性也会随之更新。在 Element Plus 中，v-model 可用于 Input、Checkbox、Radio、Select 等表单元素。

v-model 的工作原理

v-model 实际上是 Vue.js 中两个指令的语法糖：v-bind 和 v-on。当你在表单元素上使用 v-model 时，Vue.js 会自动将 v-bind 用于绑定元素的值，并将 v-on 用于监听元素的输入事件，并将事件的回调函数设置为更新 Vue 实例中的数据属性。

v-model 的使用示例

以下是一些 v-model 在不同表单元素中的使用示例：

• Input 元素

<template>
  <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputValue = ref('');
    return { inputValue };
  }
};
</script>

• Checkbox 元素

<template>
  <el-checkbox v-model="isChecked" label="同意条款"></el-checkbox>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isChecked = ref(false);
    return { isChecked };
  }
};
</script>

• Radio 元素

<template>
  <el-radio-group v-model="selectedValue">
    <el-radio label="选项一"></el-radio>
    <el-radio label="选项二"></el-radio>
  </el-radio-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedValue = ref('');
    return { selectedValue };
  }
};
</script>

• Select 元素

<template>
  <el-select v-model="selectedOption" placeholder="请选择">
    <el-option label="选项一" value="option1"></el-option>
    <el-option label="选项二" value="option2"></el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const selectedOption = ref('');
    return { selectedOption };
  }
};
</script>

总结

v-model 是 Element Plus 中实现表单双向绑定的强大工具。通过使用 v-model，您可以轻松地将表单元素的值与 Vue 实例中的数据属性同步更新，简化您的代码逻辑并提高开发效率。