zoukankan      html  css  js  c++  java
  • Vue:对象更改检测注意事项

    还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

    var vm = new Vue({
      data: {
        a: 1
      }
    })
    // `vm.a` 现在是响应式的
    
    vm.b = 2
    // `vm.b` 不是响应式的
    

    对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:

    var vm = new Vue({
      data: {
        userProfile: {
          name: 'Anika'
        }
      }
    })
    

    你可以添加一个新的 age 属性到嵌套的 userProfile 对象:

    Vue.set(vm.userProfile, 'age', 27)
    

    你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

    vm.$set(vm.userProfile, 'age', 27)
    

     有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:

    Object.assign(vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    你应该这样做:

    vm.userProfile = Object.assign({}, vm.userProfile, {
      age: 27,
      favoriteColor: 'Vue Green'
    })
    

    下面的例子以此结束这篇博客:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue对象更改检测注意事项例子</title>  
    	<script src="vue.js"></script>
    	
    </head>
    <body>
      <div id="app">
      <button @click="add()">添加</button>
         <ul>
    	   <li v-for="item in items">
    	     {{ item }}
    	   </li>
    	 </ul>
      </div>  
     
      <script>
       new Vue({
          el:"#app",
    	  data:{
    	    items:{
    		   name:"daming"
    		}
    	  },
    	  methods:{
    	    add(){
    		  Vue.set(this.items,'age', 20);
    		 //this.$set(this.items,"age",20); 两者是等价的
    		}
    	  }
       })
      </script>
    </body>
    </html>
    

     可以同时添加多个属性如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue对象更改检测注意事项例子</title>  
    	<script src="vue.js"></script>
    	
    </head>
    <body>
      <div id="app">
      <button @click="add()">添加</button>
         <ul>
    	   <li v-for="item in items">
    	     {{ item }}
    	   </li>
    	 </ul>
      </div>  
     
      <script>
       new Vue({
          el:"#app",
    	  data:{
    	    items:{
    		   name:"daming"
    		}
    	  },
    	  methods:{
    	    add(){
    		 this.items = Object.assign({},this.items,{
    		    age:20,
    			sex:"male"
    		  })
    		}
    	  }
       })
      </script>
    </body>
    </html>
    

      

  • 相关阅读:
    lLinux 下 Stress 压力测试工具
    zabbix 微信告警配置
    spark Intellij IDEA开发环境搭建
    Spark调优与调试
    在centos 6.5 x64中安装 spark-1.5.1
    二叉树的各种遍历算法
    ServletResponse的一些知识点
    UVA 10303 How Many Trees? (catlan)
    UVA 10183 How Many Fibs?
    UVA 10471 Gift Exchanging
  • 原文地址:https://www.cnblogs.com/qjuly/p/8557406.html
Copyright © 2011-2022 走看看