[10][创新实训记录]Vue的变量赋值后双向绑定问题

最新推荐文章于 2023-05-29 20:17:16 发布
最新推荐文章于 2023-05-29 20:17:16 发布
阅读量489 收藏
点赞数 1
分类专栏： 创新实训记录 前端学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41998718/article/details/107073364
版权

Vue的变量赋值后双向绑定问题

问题提出

在指定一个表单的时候，我本来的想法是通过设置一个空对象对原本中途停止填写的表格进行格式化，也就是如果提交一个新表格的时候回事全部为空的情况。因此我使用了

在这里插入图片描述

this.formItem = this.formItem1

但最终的结果让我大跌眼镜

我原本设置的formItem1是空的，填写表格的时候对formItem进行动态赋值，但点击取消重新再点击想要新增公告的时候，我希望将空的值赋予formItem，我发现打开的表单总是保留着上次填写留下的数据，那这是为什么呢？经过搜索发现，vue中的变量赋值是会双向绑定的

常见的变量双向绑定

变量双向绑定在我们使用Vue的时候经常会遇到，举一个最简单的例子，当我们遇到对接口进行HTTP请求的时候，我们写的axios的GET代码可能是下面的样式：（以在Vue中created()部分的代码为例）


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qq_41998718
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
vue 避免变量赋值后双向绑定的操作

				
			

			

				

					01-18
				

			

		

		

			
				
如： this.list = this.list2, 结果在list改变后 ...补充知识：解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变 先来看一下问题背景 我们要做一个 搜索+分页 的功能，使用vue 我们将分页控件绑定了

			
		

	



                

              
                



	

		

			

				
					
解决vue项目input输入框双向绑定数据不实时生效问题

				
			

			

				

					11-20
				

			

		

		

			
				
这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写：  this.form.phone = ‘1888888888’;  这样在页面上时候不会随着输入框值改变而改变。 解决方法如下：  this.$set(this.form,”...

			
		

	



                


  
              

                


	

		

			

				
					
vue双向绑定失效赋值失效

				
			

			

				

					qq_42675884的博客
				

				

					11-12
					
					1499
					
				

			

		

		

			
				
为什么会失效呢

首先

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的

实现方式是get和set方法

然后是通过Object.defineProperty()来实现数据劫持的。

然后呢要是，实现数据的双向绑定，首先要对数据进行劫持监听，因为写的代码没有被监听到，所以只能手动set


this.$set(obj,key,value)

查找的资料：


1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watche..

			
		

	





	

		

			

				
					
解决vue赋值之后新对象与旧对象默认双向绑定问题

				
			

			

				

					Qiuuuy的博客
				

				

					03-04
					
					1189
					
				

			

		

		

			
				
解决方法：
var newObj = JSON.parse(JSON.stringify(oldObj));//深拷贝

备注：
1、var newObj = Object.assign({},oldObj);//无效
2、虽然一般的数组和对象这种方法可行，但是对于特殊的属性（undefined/function）也不适用

...

			
		

	



		

			
		



	

		

			

				
					
vue赋值时双向绑定问题

				
			

			

				

					weixin_43410094的博客
				

				

					05-07
					
					238
					
				

			

		

		

			
				
JSON.stringify() 方法可以将一个JavaScript值(对象或数组)转换为一个 JSON字符串。例如打开弹框对当对表格内的元素进行编辑，直接这样使用会导致表格内的元素会和弹框内的元素同步改变；在vue的methods中对对象进行赋值导致上双向绑定问题。

			
		

	





	

		

			

				
					
Vue的值绑定

				
			

			

				

					科技向善
				

				

					12-27
					
					529
					
				

			

		

		

			
				
什么是值绑定啊？
值绑定就是动态的给value赋值而已：
我们前面的value中的值,可以回头去看一下，都是在定义input的时候直接给定的。
但是在真实开发中，这些input的值可能是从网络获取或定义在data中的。
所以我们可以通过v-bind:value动态的给value绑定值。
以checkbox为例来解释：
<!DOCTYPE html>
<html lang="en"...

			
		

	





	

		

			

				
					
vue中修改数组或者对象后，无法触发双向绑定

				
			

			

				

					valentinelzt的博客
				

				

					08-22
					
					2017
					
				

			

		

		

			
				
修改data中的数组，数组发生改变，页面未发生改变

可通过$set方法来设置数组的值，该方法有三个参数，第一个是要被设置值的目标对象，第二个是设置值在数组中的索引，第三个是要设置的值

<template>
  <div class="home">
    <ul>
      <li v-for="(item, index) in demoArr"
          :key="index">
        {{item}}
      </li

			
		

	





	

		

			

				
					
vue data变量相互赋值后被实时同步的解决步骤

				
			

			

				

					11-19
				

			

		

		

			
				
这是因为Vue内部的响应式系统在进行赋值操作时，会保持引用的同步。  问题描述： 在Vue组件的`data`函数中，定义了两个属性`val_1`和`val_2`。当在`onload()`方法（或者是用户的点击事件中）将`val_1`的值赋给`val_2...

			
		

	





	

		

			

				
					
vue踩坑记录之数组定义和赋值问题

				
			

			

				

					10-17
				

			

		

		

			
				
本篇文章将深入探讨Vue中数组定义和赋值的问题，以及如何有效地处理这些问题。  首先，让我们回顾一下问题场景。在Vue组件中，我们尝试初始化一个表单元素，用于显示从后台获取的有效日期范围。`data`选项中定义了一...

			
		

	





	

		

			

				
					
vue中的数据绑定

				
			

			

				

					weixin_44628177的博客
				

				

					05-12
					
					3749
					
				

			

		

		

			
				
vue中有2种数据绑定的方式：
1.单向绑定(v-bind): 数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
注意：
1.双向绑定一般都应用在表单类元素上（输入类元素，有value值）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
		单向数据绑定：<input type="text" v-bind:value="name">
        <br/> 

			
		

	





	

		

			

				
					
vue的几种绑定变量的值  防止其改变的方法

				
			

			

				

					ParadiserD的博客
				

				

					01-22
					
					4415
					
				

			

		

		

			
				
1、Object.freeze(obj)语句
obj={
 foo:"nan"
}
Object.freeze(obj);用该语句固定变量后，之后对这个变量的更改都会无效，并在console中报错。
2、v-once元素绑定
{{msg}}当msg数据改变之后span的内容也会当即发生改变，但是如果
{{msg}}如果加上了v-once绑定那么就算数据中的msg改变span里的内容不会随之

			
		

	





	

		

			

				
					
vue如何避免变量赋值后双向绑定

				
			

			

				

					u013232219的博客
				

				

					03-25
					
					4946
					
				

			

		

		

			
				
如： this.list =this.list2,  结果在list改变后 list2也改变，这不是我们想要的效果

第一种：利用 JSON.parse 和 JSON.stringify

this.list= JSON.parse( JSON.stringify(this.list2) )
1
第二种：ES6 的解析语法

this.list= { ...this.list2}

t...

			
		

	





	

		

			

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

				
			

			

				

					蓝_蓝的博客
				

				

					06-27
					
					6095
					
				

			

		

		

			
				
vue使用输入框时，只赋值不双向绑定；并且单独获得输入框的值。

			
		

	





	

		

			

				
					
vue避免变量在不同情况赋值后重复影响（即避免双向绑定）

					
最新发布

				
			

			

				

					учёба
				

				

					05-29
					
					906
					
				

			

		

		

			
				
如或者是，这种情况会导致这里有两种方法去解决。

			
		

	





	

		

			

				
					
Vue.js实现双向数据绑定（表单自动赋值、表单自动取值）

				
			

			

				

					鸵鸟陀驼鸵
				

				

					06-17
					
					2万+
					
				

			

		

		

			
				
使用Vue.js实现双向表单数据绑定，实现此功能后，前端只需要提供一个JSONObject对象，便可以实现自动填充表单；指定对应的属性名称后，便能够实现自动封装表单种的

			
		

	





	

		

			

				
					
vue 解决input内值的双向绑定问题

					
热门推荐

				
			

			

				

					ColourfulTiger的博客
				

				

					07-03
					
					4万+
					
				

			

		

		

			
				
在使用vue进行双向绑定的时候，第一想到的肯定是官方语法｛｛msg｝｝，但是在input中如果这样想，那就错啦。错误的写法如下：&lt;input type="text" value="{{item.age}}" /&gt;既然这种写法是错误的，那么怎样才能实现在input中的数据双向绑定呢？方法如下：用v-model进行绑定&lt;input type="text" v-model="item....

			
		

	





	

		

			

				
					
vue3 双向数据绑定不生效问题，vue3数据修改页面不刷新

				
			

			

				

					zhaoletf的博客
				

				

					12-03
					
					9893
					
				

			

		

		

			
				
在项目中我使用到vue3，但是开始的时候就遇到了一个双向数据绑定不生效的问题，我在网上看了一些文档，说把数据使用ref 和reactive 声明可以实现双向数据绑定。
强调文本 强调文本
加粗文本 加粗文本
标记文本
但是我发现使用ref绑定的数据确实是可以实时响应，但是当我数据量多的时候，我把数据放到 reactive 中声明，使用ES6中的扩展运算符来对其进行解构处理，但是，这样吧解构之后，便不再具有响应式的属性。
下面是我错误的代码示范。
<script>
    import {ref,

			
		

	





	

		

			

				
					
VUE reactive 变量赋值

				
			

			

				

					05-18
				

			

		

		

			
				
在 Vue.js 中，可以使用 `Vue.set` 或 `this.$set` 方法来设置响应式变量的值。...使用 `Vue.set` 或 `this.$set` 方法设置响应式变量的值时，会自动触发组件的重新渲染，从而更新界面上绑定该变量的视图。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值