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}`]"