站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

vue中v-bind和v-model的区别是什么

时间:2022-01-07 [网络编程]作者:fabuyuan 浏览:6 次

区别:1、“v-bind”是单向绑定,而“v-model”是双向绑定;2、“v-bind”只能将vue中的数据同步到页面,而“v-model”不只能将vue中的数据同步到页面,还可以将用户数据的数据赋值给vue中的属性。

vue中v-bind和v-model的区别是什么

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

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

<input type="text" v-model="val" />
<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

<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或者{{}}

<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

<div>{{{ raw_html }}}</div>

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

更多编程相关知识,请访问:编程视频!!

以上就是vue中v-bind和v-model的区别是什么的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Vuev-bindv-model

转载请注明来源:vue中v-bind和v-model的区别是什么

本文永久链接地址:https://www.adminjie.com/post/7324.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 空格键的功能有哪些

      空格键的功能有哪些

      空格键的功能:1、添加空格;2、网页翻页;3、播放器的暂停或播放;4、在游戏中,用于跳过动画、跳跃、还原画面、攻击或暂停等;5、和Ctrl键一起使用,用于切换中...

    • 怎样修改oracle的连接数

      怎样修改oracle的连接数

      方法:1、利用“altersystemsetprocesses=修改连接数scope=spfile”语句修改数据库允许的最大连接数;2、修改之后...

    • 你知道Golang怎么封装PHP常用函数吗!go-to-php

      你知道Golang怎么封装PHP常用函数吗!go-to-php

      本文由golang教程栏目给大家介绍关于Golang怎么实现PHP常用函数,希望对需要的朋友有所帮助!Golang实现PHP常用函数go-to-php用Gola...

    • oracle数据修改语句是什么

      oracle数据修改语句是什么

      在oracle中,数据修改语句是update语句,该语句的作用就是修改表中指定的数据,语法为“UPDATE表名称SET列名称=新值WHERE条件”...

    • HTML中哪种标签有边框

      HTML中哪种标签有边框

      HTML中有边框的标签:1、input标签,用于规定用户可以在其中输入数据的输入字段;2、hr标签,用于插入一条水平线;3、textarea标签,用于定义一个多...

    热门文章