vue使用输入框时，只赋值不双向绑定

最新推荐文章于 2024-04-06 16:42:45 发布
最新推荐文章于 2024-04-06 16:42:45 发布
阅读量6k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37817251/article/details/93889431
版权

当上面是列表，下面是可以修改上面的输入框时，使用双向绑定会导致，下面输入上面的表格数据就会跟着改变，但是不想要这样的效果，想要的是下面输入完成之后点击“确定”按钮时才会进行更新上面的表格数据，这个时候就需要只赋值给下面的输入框，只需要把input的 v-model 修改为 :vlaue，就可以了。

 

不使用双向绑定时，想要获得input的值，可以使用：this.$refs.name.value

 

Lan_Lan99
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue项目优化之长列表性能优化(2)(Object.defineProperty)
jieweiwujie的博客
09-06 530
Object.freeze列表数据处理
vue组件中不绑定 vs绑定key的细节分析
垂钓老翁的博客
11-10 1060
关于 Vue中key能优化性能的一点理解。 先上代码，方便理解。 <template> <div id="app"> <h4>不绑定key</h4> <div v-for="item in arr1">{{item}}</div> <h4>用数组索引绑定key</h4> <div v-for="(item,index) in arr2" :key="index">{
vue不用双向绑定获取input中的值
CheriseZhou的博客
07-26 1075
需要引入vue.js
如何在Vue中进行表单输入数据的双向绑定？
最新发布
有我更精彩的博客
04-06 341
Vue.js是一款流行的JavaScript框架，广泛应用于前端开发中。其中一个Vue.js最重要的特性之一就是数据的双向绑定。在Vue中，我们可以轻松地实现对表单输入数据的双向绑定，这让开发者可以更便捷地处理用户输入的数据。
vue避免变量在不同情况赋值后重复影响（即避免双向绑定）
учёба
05-29 871
如或者是，这种情况会导致这里有两种方法去解决。
vue 避免变量赋值后双向绑定的操作
01-18
如： this.list = this.list2, 结果在list改变后 list2也改变，这不是我们想要的效果 第一种： 利用 JSON.parse 和 JSON.stringify this.list= JSON.parse( JSON.stringify(this.list2) ) 第二种： ES6 的解析语法 this.list= { …this.list2} this.arr= […this.arr2] 补充知识：解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变 先来看一下问题背景 我们要做一个 搜索+分页 的功能，使用vue 我们将分页控件绑定了
解决vue项目input输入框双向绑定数据不实时生效问题
10-15
总之，解决Vue项目中input输入框双向绑定数据不实时生效的问题，通常需要利用`this.$set`确保数据的响应性，或者调整`v-model`的绑定方式。而在处理`v-for`循环时，应确保`key`的唯一性和正确性，以避免编译错误或...
vue 属性拦截实现双向绑定的实例代码
10-17
Vue.js 是一个流行的前端JavaScript框架，它提供了许多强大的特性，其中双向数据绑定是其核心功能之一。双向数据绑定使得视图层与数据模型之间能够自动保持同步，简化了开发过程。在Vue中，这一功能主要依赖于属性...
vue.js利用defineProperty实现数据的双向绑定
10-19
总的来说，Vue.js通过`Object.defineProperty`实现数据双向绑定，结合`Observer`和`Compile`机制，提供了一种高效且易于使用的数据绑定方式。这种方式不仅简化了开发流程，还提高了代码的可维护性，是Vue.js深受...
全面解析vue中的数据双向绑定
08-30
在Vue.js框架中，数据双向绑定是一项核心特性，它使得视图层与数据层之间能保持同步，从而简化了前端开发流程。Vue的数据双向绑定是通过一系列机制实现的，包括依赖收集、数据劫持以及事件监听。以下是对Vue中数据...
vue如何避免变量赋值后双向绑定
蹲在电饭煲上的猫
10-21 757
如： this.list = this.list2, 结果在list改变后 list2也改变，这不是我们想要的效果 第一种：利用 JSON.parse 和 JSON.stringify this.list= JSON.parse( JSON.stringify(this.list2) ) 1 第二种：ES6 的解析语法 this.list= { …this.list2} this.arr= […this.arr2] ———————————————— 版权声明：本文为CSDN博主「奔跑-lhs」的原创文
vue怎么能不做双向绑定
weixin_42584507的博客
01-07 585
在 Vue 中，有一个特殊的选项 sync，可以用于绑定父组件的属性到子组件的 prop 上，并且在父组件的属性更新时同步更新到子组件上。 你可以使用 sync 特殊选项来替代双向绑定： // 父组件<template> <div> <input v-model="message"> <my-component :message.syn...
vue 怎样让变量在第一次赋值时不触发watch
qq_45634989的博客
09-23 2352
vue 怎样让变量在第一次赋值时不触发watch
新手vue爬坑经历-vue赋值（一）
热门推荐
qq_32544569的博客
09-22 1万+
最近本人一直在学习vue，发现vue的数据绑定比起JQuery使用起来更加方便，不像以前在JQ里面苦逼的操作DOM节点，每次想要更新视图模板，都要在js里面写好多html，看着那些代码，心里就很是烦躁。 vue的好处就是视图和数据是绑定在一起的，我们可以通过改变数据从而改变视图的展示，比起以前操作的dom节点，本人还是觉得操作数据更加方便一些。 废话就先说到这里，最近在使用Vue的时候，总是遇到玄...
Vue之变量赋值
weixin_42693164的博客
10-14 1万+
前些天写Vue项目遇见一个很有意思问题：将一个数据（类型是对象）赋值给一个变量，当我去改变这个变量的时候，给它赋值的数据也跟着变化了，当我去改变数据时，变量也跟着变了，这让我想起了js中的浅复制和深复制，为验证，将对象（引用类型）改成字符窜（基本数据类型），果然，这个问题就不见了。 在js中有两种数据类型 （1） 基本数据类型：number、string、boolean、null、undefine...
VUE脱坑/1-- 如何解决vue 赋值后原数据随赋值后的数据的变化而变化
晴天有点孤单
10-19 1万+
错误示例 this.leftColumn = {...this.Columns}; this.rightColumn = {...this.Columns}; 正确示例 this.leftColumn = JSON.parse(JSON.stringify(this.Columns)); this.rightColumn = JSON.parse(JSON....
vue项目input输入框双向绑定数据不实时生效
Beauty_zhang666的博客
04-23 1万+
<input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> //这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = '1888888888';//这样在页面上时候不会随着输入框值改变...
使用vue,获取input输入值(不使用双向数据绑定)，参数e的问题
沧笙踏歌的博客
05-29 2910
<input class="ItemInput" type="number" @input="firstInput"> firstInput: function(e) { console.log(e) console.log(e.target) console.log(e.target.value) console.log(e.currentTarget); } ...
vue2双向绑定原理
06-01
在 Vue 2 中，双向绑定的原理是基于 Object.defineProperty() 方法实现的。 具体来说，当我们在组件中使用 v-model 指令时，Vue 会将其转换为一个带有 value 和 input 事件的属性。例如： ```html <input v-model="message" /> ``` 会被转换为： ```html <input :value="message" @input="message = $event.target.value" /> ``` 其中，:value 绑定了 message 数据的值，@input 监听了 input 事件并将输入框的值赋值给 message。这样，当我们改变输入框中的值时，message 数据也会相应地发生变化。 在底层实现中，Vue 2 使用 Object.defineProperty() 方法将组件实例的 data 对象中的每个属性转换为 getter 和 setter。当我们访问或修改 data 中的数据时，会触发相应的 getter 或 setter，并且在 setter 中进行依赖收集和更新操作，从而实现双向绑定。 具体来说，当我们访问 data 中的某个属性时，会触发该属性的 getter，在 getter 中会将当前组件实例的 Watcher 对象添加到该属性的依赖列表中。当该属性的值发生变化时，setter 会通知依赖列表中的 Watcher 对象进行更新操作，从而触发组件的重新渲染。 需要注意的是，在 Vue 2 中，v-model 指令只能用于表单元素上，如 input、textarea、select 等。如果需要在其他元素上实现双向绑定，可以使用自定义指令或者组件来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值