v-model和:model的区别

问题

在我们使用Element plus框架时，经常会遇到表单，比如代码块：

 <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon><el-form-item label="Activity name" prop="name"><el-input v-model="ruleForm.name" /></el-form-item></el-form>

我发现很多新手会把 :model 和 v-model 给弄混，其实这是vue的两种不同的指令，现在写这篇博客记录一下。

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名=“属性值”
简化：:属性名=“属性值”

所以上面 :model=“ruleForm” 是 v-bind:model=“ruleForm” 的缩写，
意思是把ruleForm这个数据模型绑定给当前表单。

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法：v-model=“变量名”
(v-model 中绑定的变量，必须在data中定义)

弄清楚这两种指令的区别，问题也就解决了。