v-model和:model的区别

简介: v-model和:model的区别

       场景:在使el-form时,form上面使用的是:model;而在表单里面的el-input使用的是v-model。那么这两者有什么区别呢?

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="姓名">
    <el-input v-model="formInline.user" placeholder="请输入"></el-input>
  </el-form-item>
</el-form>


       概念


       1)v-model是vue.js中内置的双向数据绑定指令,用于表单控件以外的标签是不起作用的

   (即只对表单控件标签的数据双向绑定有效)。


       2) :model相当于v-bind:model的缩写,v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,这种只是将父组件的数据传递到了子组件,并没有实现子组件和父组件数据的双向绑定。当然引用类型除外,子组件改变引用类型的数据的话,父组件也会改变的。


     区别:el-input 是一个输入控件,需要真实地绑定、处理数据,而 el-form 组件只是用来管理、校验规则等,所以只需要单向绑定。


      附注:v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件;


       1)text 和 textarea 元素使用 value 属性和 input 事件;

       2)checkbox 和 radio 使用 checked 属性和 change 事件;

       3)select 字段将 value 作为 prop 并将 change 作为事件。


相关文章
|
6月前
组件v-model
组件v-model
62 0
|
1月前
|
存储 设计模式 前端开发
Model与Controller
【10月更文挑战第4天】Model与Controller
|
3月前
|
存储 SQL 程序员
模型(Model)
【8月更文挑战第19天】
71 2
|
3月前
|
JavaScript 开发者
v-model学习
v-model学习
76 0
|
3月前
|
TensorFlow API 算法框架/工具
【Tensorflow+keras】解决使用model.load_weights时报错 ‘str‘ object has no attribute ‘decode‘
python 3.6,Tensorflow 2.0,在使用Tensorflow 的keras API,加载权重模型时,报错’str’ object has no attribute ‘decode’
54 0
|
4月前
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
vue3【实用教程】v-model(含给 v-model 添加参数,绑定多个 v-model ,v-model 的内置修饰符,自定义 v-model 的修饰符等)
179 0
|
5月前
|
JavaScript 前端开发
v-model
v-model
45 0
|
6月前
|
JavaScript 编译器
组件 v-model
组件 v-model
v-model绑定
v-model绑定
80 0
|
6月前
|
机器学习/深度学习 自然语言处理 PyTorch
Model Inference
模型推理(Model Inference)是指使用已经训练好的机器学习模型来对新数据进行预测或分类的过程。模型推理是机器学习中的一个重要环节,其目的是利用训练好的模型对新数据进行预测或分类,从而得到结果。
345 1