v-bind和v-model的区别

时间：2024-04-18 10:44:38浏览次数：23

标签：39 checkbox 区别 bind 绑定 &# model

v-model与v-bind区别：

1、v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。

2、v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。

3、v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

一、v-model

v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected

1. 绑定text

1	`<input><p> {{val}} </p>`

2. 绑定radio

<input type="radio" value="one" v-model="radioVal" />

<input type="radio" value="two" v-model="radioVal" />

<label for v-bind="radioval" />

radioval的值随着选择单选框的值，会变成one 或者 two

3. 绑定checkBox

（1）单个勾选框，最终的值为逻辑值true和false

1 2	`<input type="checkbox"` `v-model="checkVal"/>` `<label` `for="checkbox">{{checkVal}}</label>`

（2）多个勾选框时，将值绑定到一个数组

<input type="checkbox" value="apple" v-model="checkArray"/>

<label for="checkbox">{{apple}}</label>

<input type="checkbox" value="banana" v-model="checkArray"/>

<label for="checkbox">{{banana}}</label>

<input type="checkbox" value="pear" v-model="checkArray"/>

<label for="checkbox">{{pear}}</label>

<span>{{checkArray | json}}</span>

checkArray中的值会根据是否选中进行关联变化

4. 绑定select

（1）绑定到单个select
（2）绑定多个select时，同样适用数组

5. 增加参数

（1）lazy

将输入框的input事件改为change事件，使得输入框在change事件中更新而不是input

关于change事件和input事件的区别，简单说来是：

change事件必须是在输入框失去焦点之后才会触发，而input事件可以实时监测。

（2）number

将文本框输入的值都变为数字，如果是变为数字之后是NAN，则返回原始值

（3）trim

取出输入的字符串的首尾空格

二、v-bind

1.绑定文本

直接用v-bind或者{{}}

1 2	`<p v-bind="message"></p>` `<p>{{message}}</p>`

2.绑定属性

<p v-bind:src="http://...."></p>

<p v-bind:class="http://...."></p>

<p v-bind:style="http://...."></p>

3.绑定表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

4.绑定html

1	`<div>{{{ raw_html }}}</div>`

这个时候必须要使用三个{}

标签：39,checkbox,区别,bind,绑定,&#,model
From： https://www.cnblogs.com/luckyuns/p/18142997

面试官：来说说vue3是怎么处理内置的v-for、v-model等指令？
前言最近有粉丝找到我，说被面试官给问懵了。粉丝：面试官上来就问“一个vue文件是如何渲染成浏览器上面的真实DOM？”，当时还挺窃喜这题真简单。就简单说了一下先是编译成render函数、然后根据render函数生成虚拟DOM，最后就是根据虚拟DOM生成真实DOM。按照正常套路面试官接着会问vue......
Git reset 中四大模式：soft、mixed、hard、keep 的区别
Gitreset中四大模式：soft、mixed、hard、keep的区别目录Gitreset中四大模式：soft、mixed、hard、keep的区别gitreset--soft（常用）gitreset--mixed（默认）gitreset--hard（慎用）gitreset--keep（吃灰）参考工作区暂存区本地版本库soft保持所有保持回退mixed保......
工程化、模块化、组件化开发工作中这三项有什么区别
工程化：定义：工程化是一种遵循一定标准和规范，通过工具提高效率、降低成本的开发手段。它涉及整个开发流程的规划和管理，确保项目能够按照预定的目标和质量要求完成。关注点：工程化关注于整体的开发流程、项目结构、工具链的整合以及团队协作等方面。它强调使用工具和自动化手段来优......
Pipeline Model
PiplineModelSessionPipelineSettingPolicyoverview：IPipelineModelManager：一个LogicDevice对应于一个Manager。用于创建和管理PipelineModel。API：get()/getPipelineModel()当调用IPipelineModelManager的ge......
http请求头中application/x-www-form-urlencoded和multipart/form-data区别
application/x-www-form-urlencoded和multipart/form-data是两种不同的Content-Type，它们在网络请求中（尤其是POST请求）用来指定表单数据的编码格式application/x-www-form-urlencoded:•这是最常见的表单数据编码方式，也是HTML表单的默认编码类型。•所有表单字段名和值都会......
计算机软著了解，与专利的区别
查了下资料，才发现软著的用处挺广，即使不是计算机专业的也可以做软著。很多大学生在校期间也在做，还可以用来保研。很多研究生毕业条件里也有软著这项。公司也需要软著申请高新企业，还有政策优惠。app上架，必须要软著。软著是需要3000行代码的。不足3000行代码，需要提交所有的代码......
MyBatis-06-Spring的SqlSession和原始区别
DefaultSqlSession这个就不说了，SQL执行是调用执行器Executor执行SqlSessionTemplate构造函数，虽然没有立即创建SqlSession传入代理拦截器SqlSessionInterceptor，但是拦截器是一个实例内部类，可以访问到SqlSessionFactory并且SqlSessionTemplate不支持commit、rollback......
clientWidth、offsetWidth、scrollWidth区别
clientWidthclientWidth包括了元素的内边距（padding）和实际内容的宽度offsetWidthoffsetWidth包括了元素的边框（border）、内边距（padding）、滚动条（如果有）、元素的实际内容的宽度scrollWidthscrollWidth包括了元素的实际内容的宽度，但不包括边框（border）、内边距（padding）和滚动条（如果......
Effective Python：第3条　了解bytes与str的区别
Python有两种类型可以表示字符序列：一种是bytes，另一种是str。bytes实例包含的是原始数据，即8位的无符号值（通常按照ASCII编码标准来显示）。str实例包含的是Unicode码点（codepoint，也叫作代码点）。注意点：1，bytes和str并不兼容。在传递字符序列的时候需要注意。a=b"h\x65llo"b="wo......
关于post、get、put、delete的区别
post和put的区别put和post操作都是向服务器端发送数据，但是put是幂等的，而post是非幂等的。所谓幂等，即多次发送同一个请求时候，产生的结果是一样的就是幂等性原则，这是为了当网络出现延迟等，服务器（客户端）之间发送请求没有收到回应，再重新发一次，实际上另一端已经接收到了第一次的请求，接......

v-bind和v-model的区别

一、v-model

2. 绑定radio

二、v-bind

相关文章

赞助商

阅读排行