• 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>  
  • 相关阅读:
    牌库读取的修复
    法术迸发（Spellburst）
    传染孢子的探索
    降低电脑功耗——降低笔记本风扇噪音
    Playfield 类方法的注释
    大陆争霸（ 最短路变形）
    POJ 2406 Power String
    括号匹配
    HDU 1003 最大子段和
    6.19noip模拟赛总结
  • 原文地址：https://www.cnblogs.com/moxiaowohuwei/p/7388367.html
Copyright © 2020-2023  润新知