v-model 是一个常用的表单指令,也是唯一一个双向绑定指令。双向的含义是:

  • 状态的变化能更新到视图上;
  • 用户在表单中的修改也能更新到状态中。

v-model 的本质是对自定义属性和自定义事件的综合使用,默认情况下是 value 属性和 input 事件。
例如:

<!-- 在大部分情况下,以下两种写法是等价的 -->
<el-input v-model="foo" />
 
<el-input :value="foo" @input="foo = $event" />

所以,我们可以把它使用在任意的自定义组件中,来达到父子组件通讯的目的。

<template>
  <div>
    <input v-model="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
};
</script>

动态绑定

v-model="ruleForm[`score${index}`]"