vue.js中使用set方法 this.$set

vue教程中有这样一个注意事项：

第一种具体情况如下：

 

运行结果：

当利用索引改变数组某一项时，页面不会刷新。解决方法如下：

运行结果：

三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。

 

在做项目的过程中，有个发现，先上代码：

第一个数组通过利用下标改变第二项，第二个数组使用$set()方法改变第二项，根据上面的代码，我们会知道：第一个数组的第二项改变不会在页面更新，只有第二个数组的更改会在页面更新。然而结果却是：

两个数组的的改变都在页面更新了。。

也就是说，$set()方法调用时，页面会全部更新一遍。

 

 

 

 

 

[javascript] view plain copy
 
 
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>Document</title>  
  7.     <script src="vue.js"></script>  
  8.     <style>  
  9.     .blue {  
  10.         color: blue;  
  11.     }  
  12.     </style>  
  13. </head>  
  14.   
  15. <body>  
  16.     <div id="example-1">  
  17.         <ul>  
  18.             <template v-for="item in items">  
  19.                 <li>  
  20.                     {{$index}}.{{ item.msg }}  
  21.   
  22.                     <button v-on:click="f5(item)">vm.items.splice(index, 1)</button>  
  23.   
  24.                     <button v-on:click="f6(item)">vm.remove</button>  
  25.                 </li>  
  26.             </template>  
  27.         </ul>  
  28.   
  29.           
  30.         <ul>  
  31.             <li>  
  32.                 <button v-on:click="f1">vm.items[0] = {} 失效</button>  
  33.             </li>  
  34.             <li>  
  35.                 <button v-on:click="f2">vm.items.$set(0, { childMsg: 'Changed!'}) </button>  
  36.             </li>  
  37.             <li>  
  38.                 <button v-on:click="f3">vm.items.length = 0 失效</button>  
  39.             </li>  
  40.             <li>  
  41.                 <button v-on:click="f4">vm.items={}</button>  
  42.             </li>  
  43.         </ul>  
  44.         <div class="blue">  
  45.             {{$data | json }}  
  46.         </div>  
  47.         <pre>  
  48.         因为 JavaScript 的限制，Vue.js 不能检测到下面数组变化：  
  49.         直接用索引设置元素，如 vm.items[0] = {}；  
  50.         修改数据的长度，如 vm.items.length = 0。  
  51.         </pre>  
  52.     </div>  
  53.     <script>  
  54.     var vm = new Vue({  
  55.         el: '#example-1',  
  56.         data: {  
  57.             items: [{  
  58.                 msg: 'Foo'  
  59.             }, {  
  60.                 msg: 'Bar'  
  61.             }, {  
  62.                 msg: 'George'  
  63.             }]  
  64.         },  
  65.         methods: {  
  66.             f1: function() {  
  67.                 vm.items[0] = {}; // 失效  
  68.             },  
  69.             f2: function() {  
  70.                 vm.items.$set(0, {  
  71.                     childMsg: 'Changed!'  
  72.                 })  
  73.                   
  74.                  vm.items.$set(2, {  
  75.                     msg: 'dongtao!'  
  76.                 })  
  77.             },  
  78.             f3: function() {  
  79.                 vm.items.length = 0; // 失效  
  80.             },  
  81.             f4: function() {  
  82.                 vm.items = {}  
  83.             },  
  84.             f5: function(item) {  
  85.                 var index = this.items.indexOf(item) //Search an array for the item  
  86.                 if (index !== -1) {  
  87.                     this.items.splice(index, 1) //Selects a part of an array, and returns the new array  
  88.                 }  
  89.             },  
  90.             f6: function(item) {  
  91.                 this.items.$remove(item)  
  92.             }  
  93.         }  
  94.   
  95.     })  
  96.     </script>  
  97. </body>  
  98.   
  99. </html>  

 

posted @ 2017-08-18 10:52  莫笑我胡为  阅读(3269)  评论(0)  编辑  收藏  举报