vue取消数据双向绑定问题

最新推荐文章于 2023-01-07 15:11:18 发布
最新推荐文章于 2023-01-07 15:11:18 发布
阅读量2.8k 收藏 3
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40908105/article/details/121692798
版权

 如图，由于vue数据的双向绑定，给waterSetInfo拼接单位的时候，会将res.data也进行赋值，导致waterSet里面的结果不对，同一个对象多处使用问题

解决方案：

深拷贝的方法：JSON暴力转换   解构赋值 

this.waterMarkSet = JSON.parse(JSON.stringify(res.data.data));

 

丶Eleven
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Vue双向数据绑定原理解析
08-29
本篇文章主要介绍了详解Vue双向数据绑定原理解析 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue解除数据双向绑定
最新发布
maoge_666的博客
11-18 538
vue解除数据双向绑定
在vue中单独去掉某个对象某个实例的双向绑定
qq1548203810的博客
12-15 1117
优化内存，提升运算速度：在vue中单独去掉某个对象某个实例的双向绑定
vue 如何取消双向绑定
莫扎特不唱摇篮曲
09-03 8624
vue中的双向绑定，在单页面中使用起来非常便利，表单数据和对象保持数据一致，但是在某些应用场景下，比如弹窗，我们需要取消双向绑定功能，否则会出现，当我们修改弹窗数据的时候，父页面的数据同步修改的现象，本文主要介绍如何取消双向绑定。 通过 prop 传递数据 <ChildDialog ref="childDialog" :dialog-conditions-visi...
vue不用双向绑定获取input中的值
CheriseZhou的博客
07-26 1034
需要引入vue.js
vue自定义指令——input输入类型限制（数字、浮点、整数、英文等），解决中文输入法双向绑定失效问题
pixle的博客
11-12 5556
实现一个vue自定义指令——输入框（input,el-input）输入内容类型限制，解决中文输入法双向绑定失效问题，多种类型支持，数字类型，浮点类型、英文类型、整数类型、四则运算等。
vue数据双向绑定的注意点
08-30
主要为大家详细介绍了vue数据双向绑定的注意点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现双向数据绑定
01-19
Vue实现双向数据绑定的方式，具体内容如下 Vue是如何实现双向数据绑定的呢？答案是前端数据劫持。其通过Object.defineProperty()方法，这个方法可以设置getter和setter函数，在setter函数中，就可以监听到数据的变化...
轻松理解vue的双向数据绑定问题
08-28
Vue是当前很火的一款MVVM的轻量级框架，它是以数据驱动和组件化的思想构建的。因为它提供了简洁易于理解的api，使得我们很容易上手。这篇文章给大家介绍了vue双向数据绑定问题，感兴趣的朋友一起看看吧
vue双向数据绑定知识点总结
08-27
主要介绍了vue双向数据绑定的原理以及知识点总结，并做了代码实例分析，有需要的朋友参考下。
vue 属性拦截实现双向绑定的实例代码
10-17
主要介绍了vue 属性拦截实现双向绑定的实例代码，代码简答易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue的双向数据绑定
yang792508465的博客
04-22 897
是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。 第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将..
VUE如何解除数据之间的双向绑定
wakaka112233的博客
07-03 5808
问题 在开发过程中，我想要的结果是，一个表格和数据data数组绑定，将data中的数据依次遍历渲染到表格。 而data的数据是通过另一个this.formValidate 来push，代码如下 this.formValidate.BookISBN = res.data.Data.ISBN this.formValidate.BookName = res.data.Data.BookTitle this.formValidate.Auth
vue怎么能不做双向绑定
weixin_42584507的博客
01-07 551
在 Vue 中，有一个特殊的选项 sync，可以用于绑定父组件的属性到子组件的 prop 上，并且在父组件的属性更新时同步更新到子组件上。 你可以使用 sync 特殊选项来替代双向绑定： // 父组件<template> <div> <input v-model="message"> <my-component :message.syn...
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
风中追风
09-23 6091
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！
Vue-element中el-input输入卡顿问题
年少青山的博客
08-30 8241
最近使用Vue-element时，遇到了el-input输入卡顿问题，影响用户体验，如下 el-input是这样写的，没有加额外的事件 <el-input v-model="code" placeholder="code" type="textarea" :rows="1"/> 解决方法 使用.lazy修饰符 使用.lazy的修饰符可以取消v-model的双向绑定，避免输入改变增加队列造成卡顿 注意：el-input底层代码会将文本框用div包裹， 所以直接在el-input中使
vue父子组件之间双向数据绑定的(vue2/vue3)
u011200562的博客
12-03 6943
vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（第一种方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。 第二种（.sync 2.3.0+ 新增） 第三种 （vue3） vue3取消了.sync这种语法，使用v-model 语法代替。 默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对
vue解除双向绑定问题
lbx
03-29 8952
let obj = JSON.parse(JSON.stringify(this.temp1));
v-model怎么能不双向绑定
09-17
### 回答1： V-model 是 Vue.js 中的一个功能，它用于实现双向数据绑定。如果您想要不使用双向绑定，可以使用单向绑定，即使用 `v-bind` 指令来将数据从组件的数据对象绑定到模板中的 DOM 元素。例如，您可以在组件的 data 对象中定义一个属性 `message`，然后使用 `v-bind` 指令来将该属性绑定到一个文本输入框中： ``` <template> <input v-bind:value="message"> </template> <script> export default { data() { return { message: 'Hello, world!' } } } </script> ``` 这样，当组件的 `message` 属性改变时，文本输入框中的内容也会更新，但是用户输入的内容不会影响组件的 `message` 属性。 ### 回答2： v-model是Vue.js中双向数据绑定的指令，用于将表单元素的值与Vue实例的数据进行双向绑定。默认情况下，v-model会自动为表单元素的input事件和value属性建立双向数据绑定，当表单元素的值改变时，Vue实例中的数据也会被更新。 要想v-model不进行双向绑定，可以使用Vue.js提供的修饰符进行限制。具体来说，可以使用.lazy修饰符来实现一个“延迟更新”的效果。当使用.lazy修饰符时，v-model指令将不会监听输入事件，而是监听change事件，只有在表单元素失去焦点或按下回车键时，表单元素的值才会更新到Vue实例中的数据，实现了v-model的单向绑定。 例如，在一个input元素中绑定v-model时，可以使用.lazy修饰符实现单向绑定，如下所示： <input v-model.lazy="message"> 在上述代码中，表单元素的值只会在该元素失去焦点或按下回车键时，将输入的值更新到Vue实例中的message属性上，而不会实时更新。 需要注意的是，除了使用.lazy修饰符之外，还可以使用其他修饰符（如.number、.trim等）来限制或更改v-model的行为。这些修饰符可以根据具体需求选择使用，以满足不同场景下的数据绑定需求。 ### 回答3： v-model是Vue.js中的一个指令，用于在表单元素上实现双向数据绑定，可以简化数据的处理和更新。默认情况下，v-model会绑定数据属性到表单元素的value属性，并在用户输入时更新数据。 如果想要取消v-model的双向绑定，可以使用Vue.js提供的.sync修饰符。通过在v-model指令后加上.sync修饰符，可以将数据属性绑定到表单元素的value属性，但是不会在用户输入时更新数据。实际上，这是一种语法糖，它等价于使用"value"属性和"@input"事件分别实现表单元素的单向数据绑定和数据更新。 例如，假设有一个输入框，我们想要绑定一个数据属性message，但是不希望在用户输入时更新数据，可以这样使用v-model.sync指令： ``` <input v-model.sync="message"> ``` 相当于下面的写法： ``` <input :value="message" @input="message = $event.target.value"> ``` 这样就可以实现单向数据绑定，当用户输入时，不会更新message属性的值。 需要注意的是，使用.sync修饰符只是提供了一种简化的语法，实际上还是通过"value"属性和"@input"事件来实现单向数据绑定的。因此，如果需要更细粒度地控制数据的更新逻辑，可以直接使用"value"属性和"@input"事件来手动处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值