Vue列表

作者: 都江堰古巨基 | 来源:发表于2018-01-23 19:47 被阅读0次

    1.v-for 的优先级比 v-if 更高,可以这样用:

    <li v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo }}
    </li>
    ......
    <ol>
        <todo_item v-for='item in sites' v-bind:todo="item"></todo_item>    
    </ol>
    <script>
      .....
    </script>
    # 出现:component lists rendered with v-for should have explicit keys.的解决办法:
    # 将<todo_item v-for='item in sites' v-bind:todo="item"></todo_item> 修改为:
    <todo_item v-for='item in sites':key="item" v-bind:todo="item"></todo_item> 
    

    2.由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    当你利用索引直接设置一个项时,例如:
        vm.items[indexOfItem] = newValue
    当你修改数组的长度时,例如:
        vm.items.length = newLength
    为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
    
    // Vue.set
    Vue.set(example1.items, indexOfItem, newValue)
    
    // Array.prototype.splice
    example1.items.splice(indexOfItem, 1, newValue)
    
    为了解决第二类问题,你可以使用 splice:
    
    example1.items.splice(newLength)
    

    相关文章

      网友评论

          本文标题:Vue列表

          本文链接:https://www.haomeiwen.com/subject/qfwsaxtx.html