问题
在我们使用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中定义)
弄清楚这两种指令的区别,问题也就解决了。