vue v-bind和v-model的用法

已于 2022-01-19 11:46:46 修改
阅读量864 收藏 2
点赞数
分类专栏： vue 文章标签： vue v-bind v-model
于 2019-09-05 19:37:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37684037/article/details/100565456
版权 

<Input
        placeholder="请输入用户UID或手机号"
        v-bind:value="searchItem"
      />

对于输入框input标签，如果把v-model替换成v-bind，此时在输入框中重新输入其他值，searchItem也拿不到新的输入内容

searchItem只能保留model里设定的值；无法获取到视图传来的；单向的

所以总结如下应用场景：

v-bind：

用于修改html元素值，如：style等；

或者 仅一次性的输入赋值，即该变量后续不会有新的赋值

v-model：接收用户输入参数，可更新变化；双向的

曾经沧海海
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
理解并熟练运用`v-model` 和 `v-bind`，将极大地提高Vue应用的开发效率和代码可维护性。在实际项目中，根据需求选择合适的用法，可以使表单控件与Vue实例的数据保持完美同步，实现动态数据的高效管理。
浅谈 Vue v-model指令的实现原理
08-30
v-model是Vue.js中一个强大的指令，可以自动让原生表单组件的值自动和你选择的值绑定。今天，我们将详细探讨v-model指令的实现原理，并分析其在自定义表单组件中的应用。 v-model的实现原理 v-model的实现原理可以...
vue中v-bind和v-model的区别
04-10 1万+
1、:value是v-bind:value 的简写。官方给出的说明是：动态地绑定一个或多个特性，或一个组件 prop 到表达式。 官方给出的描述： 2、v-model可以进行双向数据绑定，官方的描述是这样的： 简单来说： v-bind是一个单向数据绑定，映射关系：Model->View，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图...
Vue中的v-bind和v-model区别
qq_59335499的博客
03-05 1126
在 Vue.js 中，v-bind 指令用于动态地绑定一个或多个属性到 Vue 实例的数据。通过 v-bind，你可以将 Vue 实例中的数据绑定到 HTML 元素的属性上，实现数据驱动视图的效果。具体来说，v-bind 的用途包括：1. 动态地设置 HTML 元素的属性，比如动态设置元素的 class、style、href、src 等属性。2. 将 Vue 实例中的数据绑定到表单元素的 value 属性，实现双向数据绑定。3. 在循环中动态地为每个元素设置不同的属性。
Vue3学习小结- 秘籍泄露！:v-bind与v-model的终极对决
最新发布
Jacklx888的博客
06-02 914
主要讲述了Vue3中v-bind和v-model的使用和典型案例以及区别
Vue 之 v-bind 和 v-model
weixin_45408068的博客
07-29 481
v-bind 属性和数据进行绑定 举例： 表单的value属性和一个数据绑定 说法： 绑定一个数据在某一个属性身上 v-bind 【 单项数据绑定 】 绑定类名 绑定样式 为什么要绑定： 通过操作数据就可以改变V中dom的样式，相当于操作了dom . 类名的绑定 【 两种写法 】 a. 数组的写法 【 推荐 】 b. 对象的写法 样式的绑定 a. 数组的写法 【 推荐 】 b....
VUE.JS中v-bind和v-model的区别，以及使用v-model实现双向绑定（笔记）
AKIM一枚
03-02 2150
在vue中，v-bind 只能实现数据的单向绑定，从 M （model）自动绑定到 V（view）， 无法实现数据的双向绑定，因此如果想要实现数据的双向绑定，可以使用 v-model 指令，实现表单元素和 Model 中数据的双向数据绑定， 注意： v-model 只能运用在 表单元素中 附上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &...
Vue——使用v-bind与v-on实现v-model双向绑定
weixin_45664402的博客
03-07 1464
Vue——使用v-bind与v-on实现v-model v-model其实是一个语法糖，他的背后本质包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 实现步骤如下： ①通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。 <body> <div id="app"> <input type="text" :value='message'>
vue v-model的用法解析
01-18
v-model的基本用法 一、本节说明 前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以...
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
v-model里使用过滤器
热门推荐
清心
03-22 2万+
点击查看filter文档 文档所述过滤器只能用在v-bind指令和{{}}表达式中，v-model中使用过滤器是一种思维误区。 因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例： computed: { sex: { get: function () { return this.info.sex === 1 ? '男' : this.in...
Vue的学习（六） v-bind 指令，v-model 指令的详细解析
一天不写代码难受的博客
11-19 727
v-bind 指令 我们在HTML里面的标签上面一般都有属性，比如 div标签，这个div标签里面有class的属性，但是之前标签的属性都是写死的，现在想要动态的显示，那么就需要使用vue了，那么对于标签的属性，现在就需要使用 v-bind 指令。这个指令就是 绑定属性的。 HTML 属性中的值应使用 v-bind 指令。 <div v-bind:class="{'class1': use}"> v-bind:class 指令 </div> 以上就绑定了div
没时间学 Vue (3) —— 绑定（二）：v-bind 和 v-model
可乐天尊@小七星球
03-28 994
接下来我们还是继续讲 “绑定” —— 不要吐血，使用 Vue 开发时会用到非常非常多的绑定，而我们在上一篇讲的只是非常非常小的一部分。 咱们上一篇讲的绑定，都是这种风格的： 如果我们只用 div 元素—— 不用图片，不用链接，不用列表，也不用文本框、单选框、复选框、按钮等的话，那么上面那种风格的确就够用了。 所以，接下来咱们重点吧啦一下这类标签的 “绑定” 用法 —— 主要内容在：https://cn.vuejs.org/v2/guide/syntax.html。 1、v-bind （..
vue中v-bind与v-model指令详解
Yo,的博客
08-26 4209
1.v-model v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。 经常和{{}}胡子语法配合在html中使用，  ps: {{}} === v-text 直接看代码 &lt;p&gt;********v-model绑定数据源，实现双向绑定&lt;/p&gt; &lt;div&gt; &lt;p&gt...
Vue---v-bind单向绑定与v-model双向绑定
qq_40132294的博客
05-21 3070
v-bind是单向绑定，数据只能由model流向view，不能从view流向model; v-model，数据既能从view流向model,也能从model流向view,是为双向绑定，我们可以将后台的查询数据等操作，通过axios请求，放在created或者mounted等钩子函数中，查询到的数据可以处理后自动传给view层。 1.创建login.vue组件 <template> <div class="login"> <form method="post".
Vue v-model和v-bind主要区别
weixin_41987908的博客
09-17 654
v-model和v-bind主要区别
记一次Vue中v-model和v-bind区别
weixin_33737134的博客
04-11 1079
由于v-model 只是语法糖， <input v-model="message"> 与下面的两行代码是一致的： <input v-bind:value="message" v-on:input="message = $event.target.value" /><input :value="message" @input="message = $event.tar...
vue指令:v-bind,v-for,v-model,v-on,v-cloak,v-once
she8362315的博客
09-21 3103
v-bind 用法 1.动态地绑定一个或多个特性，或一个组件 prop 到表达式。 2.在绑定 class CSS样式或 style 特性时，支持其它类型的值。 3.在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。 4.没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。 实例: ...
Vue初学——v-bind和v-on以及v-model
wfy17030212的博客
12-10 500
初学Vue，看到大佬写的代码总是很懵逼，为什么我学到的属性大佬都不用呢？ v-bind V-bind是用来绑定属性到所在的控件上的，可以通过它对页面和vue对象中的data数据实现双向绑定，你变我也变。 <div id='test'> <input type="button" value="wao" v-bind:title="mytitle"/> </div> var vm=new Vue({ el:'#test', data:{ my
vue3.0 v-bind与v-model
09-08
Vue 3.0 中的 `v-bind` 和 `v-model` 在用法上与 Vue 2.x 的版本基本保持一致。下面我将分别介绍它们的用法。 - `v-bind`：用于动态绑定 HTML 属性。你可以使用 `v-bind` 指令将一个表达式的值绑定到 HTML 元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值